时间戳

首页 > 解决方案 > 数据表在页面加载和刷新时简要显示已删除的行

javascript - 数据表在页面加载和刷新时简要显示已删除的行

问题描述

我正在使用 deletedatarow 函数来删除特定的行。它工作正常，除了删除的行在页面初始化和页面刷新时短暂显示。

我试过 deferRender、.clear、.destroy。我成功地删除了包含“西伯利亚哈士奇评估”和“雪貂发育”的行，但它们最初显示了一秒钟。

<script>
$("#datatable").clear();
</script>

<script>
setTimeout(function () { $("#datatable").show() }, 50);
</script>


<script>
  $(function() {
    $("#datatable").dataTable( {
  "deferRender": true,
    "order": [ ],
  "pageLength": 600,
  "lengthMenu": [[-1, 10, 25, 50, 100], ["All", 10, 25, 50, 100]]
.clear(),
.draw();
});
  })
</script>

<script>
function deletedatarow(){
      var a = "Siberian Husky Assessment";
      var b = "Ferret Development";
      $( "tr:contains('" + a + "')").remove();
      $( "tr:contains('" + b + "')").remove();
}
deletedatarow();
</script>

<table id="datatable">
    <thead>
        <tr>
            <th>Status Number</th>
            <th>Breed</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span>201919-0133</span></td>
            <td>Siberian Husky Assessment</td>
        </tr>
        <tr>
            <td>201919-0132</td>
            <td>Siberian Husky Assessment</td>
        </tr>
        <tr>
            <td>201919-0131</td>
            <td>Siberian Husky Assessment</td>
        </tr>
        <tr>
            <td>201919-0121</td>
            <td>Siberian Husky Assessment</td>
        </tr>
        <tr>
            <td>201919-0120</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0347</td>
            <td>Cockapoo Submitter</td>
        </tr>
        <tr>
            <td>201918-0346</td>
            <td>Ferret Development</td>
        </tr>
        <tr>
            <td>201918-0320</td>
            <td>Cockapoo Submitter</td>
        </tr>
        <tr>
            <td>201918-0313</td>
            <td>Ferret Development</td>
        </tr>
        <tr>
            <td>201918-0311</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0310</td>
            <td>Cockapoo Submitter</td>
        </tr>
        <tr>
            <td>201918-0308</td>
            <td>Cockapoo Submitter</td>
        </tr>
        <tr>
            <td>201918-0297</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0296</td>
            <td>Cockapoo Submitter</td>
        </tr>
        <tr>
            <td>201918-0292</td>
            <td>Ferret Development</td>
        </tr>
        <tr>
            <td>201918-0290</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0289</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0288</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0287</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0286</td>
            <td>Ferret Development</td>
        </tr>
        <tr>
            <td>201918-0275</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0223</td>
            <td>Ferret Development</td>
        </tr>
        <tr>
            <td>201918-0218</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0217</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0216</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0206</td>
            <td>Cockapoo Submitter</td>
        </tr>
        <tr>
            <td>201918-0205</td>
            <td>Cockapoo Submitter</td>
        </tr>
        <tr>
            <td>201918-0178</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0177</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0175</td>
            <td>Cockapoo Submitter</td>
        </tr>
        <tr>
            <td>201918-0173</td>
            <td>Cockapoo Submitter</td>
        </tr>
        <tr>
            <td>201918-0172</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0167</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0160</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0159</td>
            <td>Cockapoo Submitter</td>
        </tr>
        <tr>
            <td>201918-0158</td>
            <td>Cockapoo Submitter</td>
        </tr>
        <tr>
            <td>201918-0157</td>
            <td>Cockapoo Submitter</td>
        </tr>
        <tr>
            <td>201918-0153</td>
            <td>Cockapoo Submitter</td>
        </tr>
        <tr>
            <td>201918-0127</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0126</td>
            <td>Cockapoo Submitter</td>
        </tr>
        <tr>
            <td>201918-0121</td>
            <td>Cockapoo Submitter</td>
        </tr>
        <tr>
            <td>201918-0114</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0067</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0065</td>
            <td>Pug Characterization</td>
        </tr>
        <tr>
            <td>201918-0064</td>
            <td>Siberian Husky Assessment</td>
        </tr>
        <tr>
            <td>201918-0036</td>
            <td>Pug Characterization</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Status Number</th>
            <th>Breed</th>
        </tr>
    </tfoot>
</table>

标签： javascriptjquerydatatables

解决方案

我相信您的答案在于代码中的操作顺序。正在渲染 html，然后调用 dataTable 函数（我认为您不需要调用 .clear().draw() 方法）。调用 DataTable 函数后，您将调用deletedatrow(). 对我来说，您看到这些记录的时间很短。

绕过该过程的一种方法是在渲染数据之前过滤掉数据。或者，如果您无法做到这一点，您可以使用此处createdRow所示的回调函数并检查它是否与任何文本匹配。如果是，请删除该行。请注意，该函数将在数据表中的每一行上运行，这可能是一个瓶颈，具体取决于您的结果集的大小。

推荐阅读