Sort Table Rows By Content - jQuery tableSorter

File Size: 17.1 KB
Views Total: 5300
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Sort Table Rows By Content - jQuery tableSorter

Yet another jQuery based table sorter that enables your users to re-sort table rows based on the content type (dates, numeric values, and case sensitive alphabetic characters).

How to use it:

1. Insert the latest version of jQuery library and the jQuery table sorter's script into the html document.

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="table-sorter.js" >

2. Initialize the plugin and we're ready to go.

$('.sortable-table').tableSorter();

3. Add the following html structure to the table's th element to make the table rows sortable.

  • ascending: ascending sort
  • is-date: sort by date
  • case-sensitive: case sensitive
  • is-number: sort by number
  • no-sort: exclude the column
<table class="sortable-table indexed">
  <tbody>
      <tr class="sorter-header">
        <th class="no-sort">&nbsp;</th>
        <th title="case insensitive sort" class="ascending">First</th>
        <th title="case insensitive sort" >Last</th>
        <th title="sort by date" class="is-date">Date</th>
        <th title="case sensitive sort" class="case-sensitive">CS</th>
        <th title="case insensitive sort" class="">CI</th>
        <th title="sort numerically" class="is-number">Number</th>
      </tr>
      <tr class="indexed">
          <td class="indexed">
              <span>&nbsp;</span>
          </td>
          <td>Ádám</td>
          <td>Fodor</td>
          <td>22-Jan-2002</td>
          <td>Ove</td>
          <td>Ove</td>
          <td>526,944.143830</td>
      </tr>
      ...
</table>

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