DataTables

DataTables Examples

by Ravichandra Thota

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<button id="hide">hide data-user !=5</button>
<button id="reset">reset</button>
<table id="example">
    <thead>
        <tr>
            <th>data-user attr</th>
        </tr>
    </thead>
    <tbody>
        <tr data-user="5"><td>datauser attr 5</td></tr>
        <tr data-user="5"><td>datauser attr 5</td></tr>
        <tr data-user="5"><td>datauser attr 5</td></tr>
        <tr data-user="5"><td>datauser attr 5</td></tr>
        <tr data-user="5"><td>datauser attr 5</td></tr>
        <tr data-user="5"><td>datauser attr 5</td></tr>        
        <tr data-user="5"><td>datauser attr 5</td></tr>
        <tr data-user="5"><td>datauser attr 5</td></tr>
        <tr data-user="5"><td>datauser attr 5</td></tr>
        <tr data-user="5"><td>datauser attr 5</td></tr>
        <tr data-user="5"><td>datauser attr 5</td></tr>
        <tr data-user="1"><td>datauser attr 1</td></tr>        
        <tr data-user="1"><td>datauser attr 1</td></tr>        
        <tr data-user="1"><td>datauser attr 1</td></tr>        
        <tr data-user="1"><td>datauser attr 1</td></tr>        
        <tr data-user="1"><td>datauser attr 1</td></tr>        
        <tr data-user="1"><td>datauser attr 1</td></tr>        
        <tr data-user="1"><td>datauser attr 1</td></tr>        
        <tr data-user="1"><td>datauser attr 1</td></tr>        
        <tr data-user="1"><td>datauser attr 1</td></tr>        
        <tr data-user="1"><td>datauser attr 1</td></tr>        
        <tr data-user="1"><td>datauser attr 1</td></tr>        
        <tr data-user="1"><td>datauser attr 1</td></tr>        
        <tr data-user="1"><td>datauser attr 1</td></tr>        
        <tr data-user="1"><td>datauser attr 1</td></tr>        
    </tbody>
</table>

JavaScript

var table = $('#example').DataTable();

alert($('button:contains("reset")').length);
$("#hide").click(function() {
    $.fn.dataTable.ext.search.push(
      function(settings, data, dataIndex) {
          return $(table.row(dataIndex).node()).attr('data-user') == 1;
        }
    );
    table.draw();
});    
$("#reset").click(function() {
    $.fn.dataTable.ext.search.pop();
    table.draw();
});