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();