Alphanumeric Sorting Plugin For HTML Table - jQuery Table Sorter

Alphanumeric Sorting Plugin For HTML Table - jQuery Table Sorter

A lightweight, customizable jQuery table sorter that enables the user to sort alphanumeric data in an HTML table by clicking the table headers.

1. Download and put the jQuery Table Sorter plugin's script after jQuery.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="dist/jquery-table-sorter.min.js"></script>

2. Just call the function on the HTML table and the plugin will do the rest. Note that your HTML table must have thead and th elements.

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
$(function(){
  $( 'table' ).TableSorter();
});

3. Customize the Ascending/Descending sorting icons. Default: ▴ and ▾.

$( 'table' ).TableSorter({
  arrows: { 
    up : '&#x25B4;', 
    down : '&#x25BE;' 
  }
});

4. Apply an extra CSS class to the Ascending/Descending sorting icons.

$( 'table' ).TableSorter({
  icon_class : 'ts-sort-indicator'
});

5. Specify the columns to be sortable.

$( 'table' ).TableSorter({
  columns: 'th'
});

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

  • Publication date: 31.10.2018
  • Source