Minimal Table Sorter & Filter In jQuery - Auto Tables
File Size: | 6.28 KB |
---|---|
Views Total: | 7642 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
An easy-to-use jQuery plugin for data-rich HTML tables that makes it possible to sort table elements by each column and search/filter table rows based on search keywords.
See Also:
- 10 Best Table Pagination Plugins
- 10 Best Data Table/Grid Systems In JavaScript
- 10 Best Responsive Table Plugins In JavaScript And CSS
- 10 Best JavaScript Plugins To Sort Table By Columns
How to use it:
1. Add both jQuery JavaScript library and the auto-tables.js script to the HTML page.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/auto-tables.js"></script>
2. Add the 'tablesort' to the target HTML table to make it sortable. Don't forget to determine the sort type for each column using data-tablesort-type
attributes as follows:
<table class="tablesort" id="datatable"> <thead> <tr> <th data-tablesort-type="int">Index</th> <th data-tablesort-type="string">Email</th> <th data-tablesort-type="date">Dob</th> </tr> </thead> <tbody> Table Cells Here </tbody> </table>
3. Create a search field to filter through the data table.
<input type="text" class="tablesearch-input" data-tablesearch-table="#datatable" />
Changelog:
2021-04-27
- Improvements to default sort and fallback for all searchable cells
This awesome jQuery plugin is developed by rrickgauer. For more Advanced Usages, please check the demo page or visit the official website.