Sorting Tables with Tablesorter

When developing a website we often need to show some tabular data. We might need to show the next flights from Rome to London, the hotels available in a selected date range, or the last books published by a publisher like SitePoint. HTML provides an element for tabular data that, not surprisingly, is called table. The problem with it is that this element doesn’t have an API that allows you to sort its rows based on a certain criteria, such as the price from low to high.

As a consequence of this lack of API, several JavaScript libraries have been developed and published to address this issue. In this article I’ll introduce you to Tablesorter (actually a fork of it), a jQuery plugin for client-side table sorting.

What is Tablesorter?

Tablesorter by Rob Garrison is a fork of the original Tablesorter library developed by Christian Bach. Tablesorter is a simple jQuery plugin that provides dynamic row sorting based on the values of one or more given columns, and also offers the possibility to paginate tables created using the HTML table element. As I mentioned in the introduction, this plugin helps in filling the gap for these often needed features that aren’t native in HTML. Being a client-side library, one of its main advantages is that our users don’t need to reload the page they’re visiting in order to sort the data. Besides, client-side sorting is often very fast unless there is a very large amount of data to sort.

What you’ll love about this library is its simplicity. In its most basic case you have to include the library and then call a method, called tablesorter(), to provide the possibility to sort the data of a table. Finally, this plugin has extensive documentation that will help you in handling most of the situations you may encounter in your projects.

Now that you know what this plugin is all about, let’s see how you can use it in your website.

Getting Started with Tablesorter

To use Tablesorter you have to download it and include it in the pages where you intend to use it. You can obtain Tablesorter in a few different ways. The first is by visiting its GitHub repository, while the second is through the following Bower command.

bower install jquery.tablesorter

This plugin is made of a main JavaScript file, other optional JavaScript files, and several themes. Once downloaded, you have to include one of the themes, that you can find under the “css” folder, as shown below:

<link rel="stylesheet" href="css/theme.default.css" />

In this case the code includes the “default” theme. You have to import the JavaScript file after the jQuery library:

<script src="path/to/jquery.js"></script>
<script src="js/jquery.tablesorter.min.js"></script>

There is one last step to perform before you’re ready to use Tablesorter in your website. You must assign the class tablesorter to all the tables you want to use with the plugin. This is needed for styling purposes only but it’s something you really want to do, otherwise the theme won’t be applied. Although the plugin still works, your users won’t have any clue about the added features.

Adding the tablesorter Class

There are two ways in which you can add the class to the tables of interest. The first, and simpler, is to manually add the class name in the HTML source. But what if you can’t access or modify the HTML source? In this case you can employ JavaScript to dynamically add it. Let’s say that you want to allow your users to sort the data of every table in the page. To do so, you can write code like the following and place it at the bottom of the page:

var tables = document.getElementsByTagName('table');

for (var i = 0; i < tables.length; i++) {
   tables[i].className += ' tablesorter';
}

This gives you the widest browser compatibility possible. However, if you only need to support modern browsers, you can take advantage of the classList API and other methods to retrieve DOM elements like queryselectorall().

Using jQuery, the previous code can be shortened to:

$('table').addClass('tablesorter');

At this point we can call the method tablesorter() to expose the sorting functionality. A minimal example use of the plugin is shown below:

$('table').tablesorter();

A Basic Demo

To let you see this plugin in action, we’ll use the following table:

<table class="tablesorter">
   <thead>
      <tr>
          <th>Title</th>
          <th>Author</th>
          <th>Price (in dollars)</th>
      </tr>
   </thead>
   <tbody>
      <tr>
          <td>The CSS3 Anthology, 4th Edition</td>
          <td>Rachel Andrew</td>
          <td>29.00</td>
      </tr>
      <tr>
          <td>Instant jQuery Selectors</td>
          <td>Aurelio De Rosa</td>
          <td>13.26</td>
      </tr>
      <tr>
          <td>Killer UX Design</td>
          <td>Jodie Moule</td>
          <td>29.00</td>
      </tr>
      <tr>
          <td>Jump Start CSS</td>
          <td>Louis Lazaris</td>
          <td>19.00</td>
      </tr>
   </tbody>
</table>

Putting together the snippets listed so far, results in the following demo:

Click on the headers and you’ll see that your table is now sortable!

It’s worth mentioning that Tablesorter works on all standard HTML tables, so you must use thead and tbody in the tables.

Setting a Default Order

Sometimes you want your unsorted data coming from the server to be shown already sorted based on a given criteria. Using Tablesorter this can be easily achieved by passing an object literal to the tablesorter() method. This object literal can contain several options to configure the plugin to work in the way you need. A list of all the options available is reported in the official documentation.

Let’s say that you want to sort all the tables on the page based on the values of the first column in descending order. To do so, you have to pass a sortList property whose value is a 2D array where the first element represents the 0-based index of the column to sort and the second element is 1 for the descending order and 0 for the ascending order. Therefore to achieve the goal discussed you have to write:

$('table').tablesorter({
   sortList: [[0, 1]]
});

This example can be expanded further by setting a multi-column order criterion. If you want to sort the table based on the values of the first column in descending order and the third column in ascending order, you can write:

$('table').tablesorter({
   sortList: [[0, 1], [2, 0]]
});

A live demo that employs the previous example is shown below and also available as a JSFiddle:

Adding Stripes to the Table

To enhance the readability of your data you should use two different colors for your rows: one for the odd rows and the other for the even rows. With Tablesorter performing this task is ridiculously easy. All you have to do is add a property called widgets to the configuration object passing a value of zebra wrapped into an array:

$('table').tablesorter({
   widgets: ['zebra']
});

Before we see the result of this code, I want to show something else.

Changing the Default Theme

If you want to change the default theme, you have to replace the CSS file with the one representing the theme you want. So, let’s say that you want to use the “blue” theme. You have to replace the line:

<link rel="stylesheet" href="css/theme.default.css" />

With:

<link rel="stylesheet" href="css/theme.blue.css" />

Next, you have to inform the plugin of the change by setting in the configuration object a property called theme with the value representing the name of the theme you want to use. In this case, because the “blue” theme was used, you have to write:

$('table').tablesorter({
   theme: 'blue'
});

Before we see a live demo I want to introduce you one last feature: pagination.

Paging Data with Tablesorter

The pagination feature is provided by Tablesorter as an external plugin, so before we can employ it in our pages we have to include the relative JavaScript and CSS file. The pagination plugin is downloaded together with Tablesorter and both the files are located in a folder named “addons/pager”. Once you include these files in your page (remember that the JavaScript file must be included after the Tablesorter plugin), you have to set up the markup for the pager as reported below:

<div id="pager" class="pager"> 
   <img src="addons/pager/icons/first.png" class="first"/> 
   <img src="addons/pager/icons/prev.png" class="prev"/> 
   <span class="pagedisplay"></span>
   <img src="addons/pager/icons/next.png" class="next"/> 
   <img src="addons/pager/icons/last.png" class="last"/> 
   <select class="pagesize" title="Select page size"> 
      <option selected="selected" value="2">2</option> 
      <option value="3">3</option>
      <option value="4">4</option>
   </select>
   <select class="gotoPage" title="Select page number"></select>
</div>

At this point you have to call the tablesorterPager() method by specifying the wrapper containing all the elements of the page. Based on the previous markup, you have to write:

$('#my-table')
   .tablesorter()
   .tablesorterPager({
      container: $('#pager')
   });

An example of a table that uses the pager, has the default theme changed, and also employs the zebra stripe widget is shown below and also available as a JSFiddle:

Conclusion

In this article I introduced you to a fork of Tablesorter, a jQuery plugin plugin for turning a standard HTML table into a sortable table without page refreshes. This plugin can successfully parse and sort many types of data including linked data in a cell. By using this plugin you can also add pagination to your data so they are easier to read. In case you liked the idea but not the plugin and you want an alternative, I suggest you check out DataTables.