Cutomizable Real-time Table Filter Plugin With jQuery - tableFilterable

tableFilterable is a simple, fast, customizable jQuery table filtering plugin which allows to apply multiple live filter rules to an Html table.

How to use it:

1. Include the jQuery tableFilterable plugin's script after you have jQuery library installed.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script> 
<script src="jquery.table-filterable.js"></script>

2. Create an input field or a checkbox for the filter.

<input type="text" id="filter-name" placeholder="Filter by name">

3. Call the function on the target table and specify the filter selector and its corresponding table column you want to filter.

$('#table-filterable').tableFilterable({
  filters: [{
    filterSelector: '#filter-name',
    event: 'keyup', // custom event
    filterCallback: function($tr, filterValue) {
        // filterValue is the content of the name input
        return  $tr.children().first().text().toLowerCase().indexOf(filterValue) != -1;
    },
    delay: 100 // delay in ms after which the event is fire  
  }]
});

4. Optionally, you can fire a callback function at the end of filter process like this.

$('#table-filterable').tableFilterable({
  filters: [{
    filterSelector: '#filter-name',
    event: 'keyup', // custom event
    filterCallback: function($tr, filterValue) {
        // filterValue is the content of the name input
        return  $tr.children().first().text().toLowerCase().indexOf(filterValue) != -1;
    },
    delay: 100 // delay in ms after which the event is fire  
  }],
  onFilterFinished: function(nbRowShown, nbRowsTotal) {
    // do something
  }
});

---

This awesome jQuery plugin is developed by wonzbak. For more Advanced Usages, please check the demo page or visit the official website.