A quick introduction to the jQuery tablesorter plugin

A few days ago version 2.0 of the tablesorter plugin was released. Before 2.0 the tablesorter worked fine but I never did anything with it. Today I thought it was time to see whether this was a good solution for the table sorting we need. In this article I will show you how to enable sorting on any table (yes it’s that simple) and how to create custom sort functions.

In our last project we used (and still using) Dojo. Dojo is a great framework but I’m starting to like jQuery more and more. A great advantage of jQuery is the great documentation and the plugin section on their website. This section contains all the plugins that are useful and matured (no pre-alpha versions with loads of bugs for example). A few days ago I read about the tablesorter plugin and decided to give it a shot, it eventually solved an old Javascript problem I had!

Let’s take a look at this simple table:

<table id="myTable">
    <thead>
        <tr>
            <th>City</th>
            <th>Distance (km)</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>Amsterdam</td><td>0</td></tr>
        <tr><td>Utrecht</td><td>1</td></tr>
        <tr><td>Eindhoven</td><td>100</td></tr>
        <tr><td>Rotterdam</td><td>11</td></tr>
        <tr><td>Enschede</td><td></td></tr>
        <tr><td>Den Haag</td><td>2</td></tr>
        <tr><td>Groningen</td><td>-1</td></tr>
    </tbody>
</table>
 

This is just a normal table, nothing special about it. It contains a column with Dutch cities and a column with distances. Those distances don’t mean anything, they’re just there to prove something. What that something is I’ll explain later (readers of my previous blog entry probably know what I’m talking about).

When we look at this table we see an ugly table. Let’s include the stylesheet for the tablesorter and put the tablesorter class on the table tag and refresh the browser:

That already looks much better. To add sorting we have to include jQuery and the tablesorter plugin:

<script type="text/javascript" src="js/jquery-1.1.3.1.pack.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $("#myTable").tablesorter();
    });
</script>

The ready function adds the tablesorter to the table with id myTable when the DOM-tree is finished loading.

Now refresh the browser and the sorting works!

The next step is to make sure the distance field gets sorted correctly. You can add sorter types when you add the tablesorter in javascript:

$("#myTable").tablesorter({ headers: { 
     1: { sorter:'text' } 
   } });

This means the second column (counting starts at 0) is treated as a text column.
It’s also possible to add the sorter on the class attribute :
Use <th class="{sorter: ‘text’}">Distance (km)</th>
But I personally prefer to use the class only for css styling.

Other choices for the sorter are procent, text, currency, integer and number. Let’s take number and you’ll notice the empty cell behaves very unpredictable.

The problem and partial solution is described in this. For tablesorter we can define a custom parser, this is a kind of interface you have to implement which invokes the sort function on the background. I really like this construction, so nice and clean.

The example describes what you have to do and my ‘implementation’ looks like this:

        $.tablesorter.addParser({
        // set a unique id
            id: 'nullInt',
            is: function(s) {
                // return false so this parser is not auto detected
                return false;
            },
            format: function(s) {
                // format your data for normalization
                if (!s) {
                    return -0.000000001;
                } else {
                    return s;
                }
            },
        // set type, either numeric or text
            type: 'numeric'
        });

The addParser function is invoked with some parameters. For now we only need the id and format function which replaces null vales with -0.000000001. The format function ‘normalizes’ the data for you and sorts that
normalized data (with leaving the original values untouched, of course).

Now the nullInt (the id of the parser) can be chosen as a parameter for the sorter.

Well, that also works pretty good and is much cleaner than implementing your own sort function.

Conclusion

I really love the tablesorter plugin. It’s very easy to use and the code looks so clean! Every sortable table I create from now on will use the tablesorter plugin. The Dojo widget also works fine, but I like clean and simple structure of jQuery.

I didn’t tell you about the multi-column sort (with the shift key) and pagination (see screenshot). But you can all find out how to do that on the tablesorter site This site also has some great code examples.

Source

http://tablesorter.com/