Tablesorter Jquery plugin for table sorting

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful features including:

  • Multi-column sorting
  • Multi-tbody sorting - see the options table below
  • Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
  • Support secondary "hidden" sorting (e.g., maintain alphabetical sort when sorting on other criteria)
  • Extensibility via widget system
  • Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
  • Works with jQuery 1.2.6+ (jQuery 1.4.1+ needed with some widgets).
  • Works with jQuery 1.9+ ($.browser.msie was removed; needed in the original version).
  • Small code size

Getting started

To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the <head> tag of your HTML document:

<!-- choose a theme file -->
<link rel="stylesheet" href="/path/to/theme.default.css">
<!-- load jQuery and tablesorter scripts -->
<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

<!-- tablesorter widgets (optional) -->
<script type="text/javascript" src="/path/to/jquery.tablesorter.widgets.js"></script>

tablesorter works on standard HTML tables. You must include THEAD and TBODY tags:

<table id="myTable" class="tablesorter">
  <thead>
    <tr>
      <th>Last Name</th>
      <th>First Name</th>
      <th>Email</th>
      <th>Due</th>
      <th>Web Site</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Smith</td>
      <td>John</td>
      <td>[email protected]</td>
      <td>$50.00</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>Bach</td>
      <td>Frank</td>
      <td>[email protected]</td>
      <td>$50.00</td>
      <td>http://www.frank.com</td>
    </tr>
    <tr>
      <td>Doe</td>
      <td>Jason</td>
      <td>[email protected]</td>
      <td>$100.00</td>
      <td>http://www.jdoe.com</td>
    </tr>
    <tr>
      <td>Conway</td>
      <td>Tim</td>
      <td>[email protected]</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
    </tr>
  </tbody>
</table>

Start by telling tablesorter to sort your table when the document is loaded:

$(function(){
  $("#myTable").tablesorter();
});

Click on the headers and you'll see that your table is now sortable! You can also pass in configuration options when you initialize the table. This tells tablesorter to sort on the first and second column in ascending order.

$(function(){
  $("#myTable").tablesorter({ sortList: [[0,0], [1,0]] });
});

Demo Download

About The Massive Technolab

Avatar
Who We Are

Massive Technolab is a Leading IT services Company in India that expertise in web Development, Web Design and SEO at affordable rates.

Leave a Comment

comments powered by Disqus