Filterable-Table uses the jQuery implementation of a table filter that enables a search entry to filter table data at the key. Throughout each table, rows to check if there are any text values that match the value of the input field. The toggle method hides the row (display: none) that doesn’t match the search. We use the toLowerCase () method to convert text to lowercase, which makes the search case insensitive.
table sorting paging and filtering with jquery demo, jquery filter table rows by column value, jquery filter table rows by multiple columns, jquery table filter multiple criteria
How to make use of it:
1. This table filter script requires the 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 in your table body.
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});Minimalist Table Filter, Filterable-Table Plugin/Github, html table filter jquery plugin, jquery table filter plugin, jquery fancy table
See Demo And Download
Official Website(aimeeaidanu): Click Here
This superior jQuery/javascript plugin is developed by aimeeaidanu. For extra Advanced usage, please go to the official website.
