Minimal Table Sorter & Filter In jQuery - Auto Tables

Minimal Table Sorter & Filter In jQuery - Auto Tables
File Size: 6.28 KB
Views Total: 2728
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:

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.