Question

我正在使用bootstrap dataTable，我制作了一个自定义过滤器。我希望按价值过滤所有动物。例如：

如果我选择“Cat”，则只显示“cat”类的行。

它到目前为止工作，但是当我选择另一只动物时，我无法弄清楚如何重新移除已删除的行。当我的一行消失时，我无法取回它。

var table = $('.data-table').DataTable({
 "dom": "<'row'<'col-sm-4'l><'col-sm-4'f><'col-sm-4 customFilterHolder'>>" +
 "<'row'<'col-sm-12'tr>>" +
 "<'row'<'col-sm-5'i><'col-sm-7'p>>",
 "scrollX": true,    
  initComplete: function(){
      $(".customFilterHolder").html('<div style="float:right;min-width:200px"><div style="float:right;"><select name="select" class="select form-control select2" style="width: 100%;"><option value="all">All</option><option value="dog">Dog</option><option value="cat">Cat</option><option value="horse">Horse</option></select></div><div style="float:right;margin:4px 10px 10px">Filter</div></div>');      

      $('.select').on('change',function(){
          table.rows(':not(.' + $(this).val() + ')').remove().draw(true);
      });    
   }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://almsaeedstudio.com/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.css">

<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.min.js"></script>

<table class="data-table table table-bordered table-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Animal</th>
      <th>City</th>

    </tr>
  </thead>
  <tbody>
    <tr class="all cat">
      <td>Tiger Nixon</td>
      <td>Cat</td>
      <td>Edinburgh</td>
      
    </tr>
    <tr class="all cat">
      <td>Garrett Winters</td>
      <td>Cat</td>
      <td>Tokyo</td>
      
    </tr>
    <tr class="all dog">
      <td>Ashton Cox</td>
      <td>Dog</td>
      <td>San Francisco</td>
      
    </tr>
      <tr class="all horse">
      <td>Lesley Manning</td>
      <td>Horse</td>
      <td>Washington</td>
      
    </tr>
  </tbody>
</table>

Answer 1

正如docs明确指出的那样，remove()实际上删除了行。如果您希望能够还原已删除的行，则必须自己实现该功能。这是一个非常简单的插件示例，用于维护已移除<tr>的列表：

var removedRows = {};
$.fn.dataTable.Api.register('row().hide()', function(index) {
  if (index && removedRows[index]) {
    var row = this.table().row.add( removedRows[index].html);
    delete removedRows[index]

    //here the reinserted row can be manipulated
    row.nodes().to$().css('color', 'green')
  } else {
    removedRows[this.index()] = { html: this.nodes().to$()[0] };
    this.remove()
  }
  return this
});

现在table.row(<selector>).hide()会删除一行 table.row().hide(deletedIndex)将按原始索引

恢复已删除的行

可以通过

恢复所有已删除的行

Object.keys(removedRows).forEach(function(index) {
  table.row().hide(index).draw();
})

演示 - ＆gt;的 http://jsfiddle.net/4uvrgbx3/

Answer 2

我找到了另一个适合我的解决方案：

table.columns(1).search($(this).val()).draw();

如何在Bootstrap DataTable中恢复已删除的行？

2 个答案: