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.