CODEWITHSUNDEEP
jquerytwitter-bootstrapdatatables
peace_love
peace_love

Reputation: 6471

How can I restore removed rows in the Bootstrap DataTable?

I am working with the bootstrap dataTable and I made a custom filter. I want to filter all the animals by value. For example:

If I select "Cat" show only the rows with the class "cat".

It is working so far, but I cannot figure out how to reset the removed rows again when I select another animal. When one time my row is gone, I cannot get it back.

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>

Upvotes: 1

Views: 1001

Answers (2)

davidkonrad
davidkonrad

Reputation: 85558

As the docs clearly states, remove() actually remove the rows. If you want to be able to restore removed rows, you must implement the feature yourself. Here is a very simple example of a plug-in that maintain a list of removed <tr>'s :

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
});

Now table.row(<selector>).hide() will remove a row.
table.row().hide(deletedIndex) will restore a deleted row by original index

All deleted rows can be restored by

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

demo -> http://jsfiddle.net/4uvrgbx3/

Upvotes: 1

peace_love
peace_love

Reputation: 6471

I found another solution that is working for me:

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

Upvotes: 0

Related Questions