Minimalist Table Sorting Plugin with jQuery - TableSort

TableSort is a dead simple, Bootstrap-compatible jQuery table sort plugin which makes an html table with <thead> and <tbody> sortable on client side. The plugin provides a quick way for the user to re-order rows within a table.

Basic usage:

1. The plugin uses Font Awesome 4 for sorting signs by default.

<link rel="stylesheet" href="font-awesome.min.css">

2. Add the data-sortable attribute to table headers.

<thead>
  <tr>
    <th data-sortable="true">#</th>
    <th data-sortable="true">Name</th>
    <th>Desc</th>
    <th data-sortable="true">Date</th>
  </tr>
</thead>

3. Specify the data values using the data-sort-value attribute.

<td data-sort-value="1">1</td>
<td data-sort-value="a">A</td>
<td>...</td>
<td data-sort-value="2015-03-01">
  March 1st 2015
</td>

4. Include the jQuery TableSort plugin after jQuery library but before you close the body tag.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="dist/TableSort.min.js"></script>

5. Active the plugin by calling the function on the table tag.

$('table').tableSort();

6. Setup the default sorting direction.

$('table').tableSort({
  sortDirection: 'asc', // or desc
});

7. Replace the default sorting signs with yours.

$('table').tableSort({
  sortableIconClass: 'fa fa-sort',
  ascIconClass: 'fa fa-sort-asc',
  descIconClass: 'fa fa-sort-desc',
});

---

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