Introduction to Tablesorter

Final product image
What You'll Be Creating

Tablesorter is a straightforward jQuery plugin that provides dynamic column sorting and pagination in your HTML tables. It's a nice way to provide sortable, scripted tables that don't require the user to refresh the page. You can also use it when you're using Ajax in your application.

This tutorial will showcase actual code and three examples of using Tablesorter. You can download the code at GitHub. Note that the Tablesorter download is actually missing a few graphic images for its pagers, so you may want to use my GitHub files.

Download the code for this Tablesorter demo at Github

Example 1: Basic Tablesorter

My first example shows you how to use Tablesorter to provide a sortable list of Internet domains for sale. You can see the demo here and the code here.

There are a few components that we need to set up for Tablesorter. First, we have to load jQuery and the tablesorter plugin. I'll also load its blue CSS theme:

Then, we'll build the table HTML:

After that, we need to initialize Tablesorter when the page loads:

In the example above, I'm setting the fourth column, which is the price column, to sort in descending order, and I'm setting the third column, which is the category column, to sort in ascending order. 

Once done, you should see something like this:

Basic tablesorter

If you're not loading your tables dynamically from a database, you might be wondering if there's an easier way to generate HTML table code from long lists. There is! I describe it in How to Park, List and Sell Your Domains.

Basically, I'm using a Google Drive spreadsheet which lists my domains, categories, and prices, and I use concatenate functions to generate Apache server aliases, JavaScript pricing code, and the Tablesorter table row HTML:

My Google Drive HTML Generating Spreadsheet

Here's what a concatenate function looks like in Google Drive:

I use the Domena theme available at Envato Market as landing pages for each domain:

My Domains for Sale page powered by Domena Theme

I've customized JavaScript in the theme to change the price based on the domain that's loaded. I think the newer versions of Domena handle multiple domains more elegantly.

Example 2: Paging With Tablesorter

Now, we'll show you how to implement paging with Tablesorter. You can see the demo here and get the code here. It should look something like this:

Paging with Tablesorter

This time, we'll initialize Tablesorter in the <head> tag. We'll also add the Tablesorter plugin script:

We'll place the HTML div for the pager below the table:

That's it.

Note that I found the pager icons had been deleted from the Tablesorter GitHub site, so I downloaded them manually from the demo. It may be easiest for you to get them from the forked version of the Tuts+ repository.

Example 3: Ajax Loading

Now we'll look at how to use jQuery to populate a Tablesorter table dynamically. To start with, we'll initialize a Tablesorter table with just .IO domains. It'll look something like this:

The AJAX Tablesorter Demo

When you click the Add .COM Domains link, you'll see the table expand with .COM domains.

You can see the demo here and the code here. The HTML for the Ajax request with the .COM domains is here.

Here's the code that responds to the click event, loading additional rows via Ajax:

Tablesorter can definitely improve the user experience if used well.

I hope you've found this tutorial useful. Please feel free to post corrections, questions or comments below. You can also reach me on Twitter @reifman or email me directly.

Related Links



Related Articles