Sorting Tables with Tablesorter

Originally published at: http://www.sitepoint.com/sorting-tables-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();

Continue reading this article on SitePoint

I’ve been using the original Christian Bach library.

I see Rob Garrison’s version also requires the table to have both a thead and tbody. All tables should have these, but … something to note.

I had to do some manipulation of datetime fields to get sort to work properly, and IP sorting is a bit wonky, but overall I like it a lot.

Can you save me from needing to dig into the code and highlight any differences between the two versions?

Basically you should never use the original one as the last version released was in 2008 and uses some flags that have been removed from jQuery a long time ago.

On a side note, in my article I assert that the fork works with thead and tbody too.

Thanks, I never thought to look at the age. 2008 was ages ago.

Yes, I noticed that

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

Though I still often see tables missing one or the other
:cough: Discourse Admin User tables :cough:

Excellent article, thank you.

I must express a preference for Datatables though, the sorting and pagination works a treat - I’ve used both Datatables and Tablesorter - and the extras in Datatables means that I generally reach for that instead, the learning curve is a monster though!

I wonder if tablesorter can sort words with non-English characters (for example, É, À coded either as utf8 or HTML entities) I was never able to make it work properly.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.