Sort Table Rows By Content - jQuery tableSorter

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).

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.

  • Publication date: 17.11.2017
  • Source