 |
| Minimal Table Filter & Sorter In jQuery Plugin |
Auto Tables is a easy to use jQuery plugin for data rich HTML tables which allows to sort minimal table elements based on each column and search/filter table rows based on search keywords.
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"
/>
Live Demo
See the Pen Minimal Table Filter & Sorter In jQuery Plugin - Auto Tables by Plugin JS (@teguhsigit) on CodePen.
File Info
- File Name :
- auto-tables-master.zip
- Size :
- 352.87KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT