This time I will share jQuery Plugin and tutorial about Minimal & Fast Table Filter Plugin – jQuery TableFilter, hope it will help you in programming stack.
A really simple and blazing fast jQuery table filter plugin to filter rows of an HTML table with a regular search or text field.
How to use it:
1. Create a text field and specify the selector of the target HTML table in the data-tablefilter attribute.
3 |
data-tablefilter="#table" |
4 |
placeholder="Filter..."> |
08 |
<td>Alfreds Futterkiste</td> |
13 |
<td>Centro comercial Moctezuma</td> |
14 |
<td>Francisco Chang</td> |
19 |
<td>Roland Mendel</td> |
23 |
<td>Island Trading</td> |
24 |
<td>Helen Bennett</td> |
28 |
<td>Laughing Bacchus Winecellars</td> |
29 |
<td>Yoshi Tannamuri</td> |
33 |
<td>Magazzini Alimentari Riuniti</td> |
34 |
<td>Giovanni Rovelli</td> |
2. Load the TableFilter plugin’s script after you load the latest jQuery library.
1 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
2 |
<script src="/path/to/dist/jquery.tablefilter.min.js"></script> |
3. Initialize the table filter plugin on the search field and done.
2 |
$('.filter').TableFilter(); |
4. Perform a function after filtering.
2 |
$('.filter').TableFilter({ |
3 |
afterFilter: function(){ |
This awesome jQuery plugin is developed by DimNS. For more Advanced Usages, please check the demo page or visit the official website.
