Wie kann ich entfernte Zeilen in der Bootstrap DataTable wiederherstellen?

Question

Ich arbeite mit dem bootstrap dataTable und ich habe einen benutzerdefinierten Filter erstellt. Ich möchte alle Tiere nach Wert filtern. Zum Beispiel:

Wenn ich "Cat" auswählen, zeigen nur die Zeilen mit der Klasse "Katze".

Es funktioniert so weit, aber ich kann nicht herausfinden, wie die entfernten Zeilen wieder zurückgesetzt werden, wenn ich ein anderes Tier auswähle. Wenn meine Reihe einmal weg ist, kann ich sie nicht zurückbekommen.

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

fand ich eine andere Lösung, die für mich funktioniert:

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

Answer 2

Als docs eindeutig fest, remove() tatsächlich entfernen Sie die Zeilen. Wenn Sie entfernte Zeilen wiederherstellen möchten, müssen Sie die Funktion selbst implementieren. Hier ist ein sehr einfaches Beispiel eines Plug-in, das eine Liste entfernt <tr> ‚s halten:

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

Jetzt table.row(<selector>).hide() eine Zeile entfernen. >http://jsfiddle.net/4uvrgbx3/