Minimalist Table Filter With jQuery
File Size: | 2.17 KB |
---|---|
Views Total: | 2373 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

This is the minimalist jQuery implementation of a table filter that enables a search input to filter your table data on keyup.
How to use it:
1. This table filter script requires jQuery library to work.
<script src="/path/to/cdn/jquery.slim.min.js"></script>
2. Create a search field for the table filter.
<input id="myInput" type="text" placeholder="Search.."> <table> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody id="myTable"> <tr> <td>Homer</td> <td>Simpson</td> <td>[email protected]</td> </tr> <tr> <td>Marge</td> <td>Simpson</td> <td>[email protected]</td> </tr> <tr> <td>Bart</td> <td>Simpson</td> <td>[email protected]</td> </tr> <tr> <td>Lisa</td> <td>Simpson</td> <td>[email protected]</td> </tr> <tr> <td>Maggie</td> <td>Simpson</td> <td>[email protected]</td> </tr> </tbody> </table>
3. Enable the table filter on your table body. Done.
$(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); });
This awesome jQuery plugin is developed by aimeeaidanu. For more Advanced Usages, please check the demo page or visit the official website.