Table Filter jQuery - A simple but powerful jQuery table management extension provides an easy way to filter tabular data in an HTML table.
jQuery offers several plugins and methods to filter table data effectively. Here are some notable features of popular jQuery table filter plugins:
Basic jQuery Filter:
- Case-insensitive search: Filters table rows based on input, ignoring case differences.
- Toggle visibility: Shows or hides rows depending on whether they match the search criteria.
TableFilter:
- Advanced column filtering: Allows filtering by individual columns.
- Sorting and pagination: Supports sorting and paginating table data.
- Inline editing: Enables editing of table cells or rows directly.
- Extended keyboard navigation: Provides enhanced navigation options.
Table Sortable:
- Dynamic data handling: Renders tables from JSON or JavaScript objects.
- Live filtering: Filters data in real-time as you type.
- Pagination and sorting: Includes features for paginating and sorting table data.
Raty:
- Customizable star icons and colors: Allows for personalized star ratings.
- Fractional ratings: Supports partial star ratings.
How to make use of it:
1. Download the plugin and insert the jquery.table-filter.min.js script after the newest jQuery library.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/dist/jquery.table-filter.min.js"></script>
2. Call the function on the HMTL desk to generate a filter search discipline on the web page.
<table>
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>$('table').tableFilter(
// options right here
);3. You are additionally allowed to create customized filters utilizing the filterRows methodology.
<a href="#" onclick="$('table').tableFilter('filterRows', 'Cell Value 1');">Cell Value 1</a>
<a href="#" onclick="$('table').tableFilter('filterRows', 'Cell Value 2');">Cell Value 2</a>
<a href="#" onclick="$('table').tableFilter('filterRows', 'Cell Value 3');">Cell Value 3</a>
...
<a href="#" onclick="$('table').tableFilter('filterRows', '');">Reset</a>4. Customize the placeholder for the search discipline.
$('table').tableFilter({
placeholder: 'Type To Search'
});5. Apply extra CSS types or lessons to the search area.
$('table').tableFilter(
class: 'form-control form-control-sm',
style: 'font-size:24px'
);6. Determine the minimal variety of characters to set off the filter.
$('table').tableFilter({
min: 0
});7. Exclude or include table columns.
$('table').tableFilter();See Demo And Download
Official Website(alexanevsky): Click Here
This superior jQuery/javascript plugin is developed by alexanevsky. For extra Advanced Usages, please go to the official website.
Be First to Comment