Minimal Table Sorter & Filter In jQuery - Auto Tables

Minimal Table Sorter & Filter In jQuery - Auto Tables
File Size: 6.17 KB
Views Total: 621
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"
/>

This awesome jQuery plugin is developed by rrickgauer. For more Advanced Usages, please check the demo page or visit the official website.