A quick introduction to the jQuery tablesorter plugin

7

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:

&lt;table id=&quot;myTable&quot;&gt;<br />&nbsp;&nbsp;&nbsp; &lt;thead&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;th&gt;City&lt;/th&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;th&gt;Distance (km)&lt;/th&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/thead&gt;<br />&nbsp;&nbsp;&nbsp; &lt;tbody&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td&gt;Amsterdam&lt;/td&gt;&lt;td&gt;0&lt;/td&gt;&lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td&gt;Utrecht&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td&gt;Eindhoven&lt;/td&gt;&lt;td&gt;100&lt;/td&gt;&lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td&gt;Rotterdam&lt;/td&gt;&lt;td&gt;11&lt;/td&gt;&lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td&gt;Enschede&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td&gt;Den Haag&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td&gt;Groningen&lt;/td&gt;&lt;td&gt;-1&lt;/td&gt;&lt;/tr&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/tbody&gt;<br />&lt;/table&gt;<br /> <br />

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:

&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-1.1.3.1.pack.js&quot;&gt;&lt;/script&gt;<br />&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.tablesorter.pack.js&quot;&gt;&lt;/script&gt;<br />&lt;script type=&quot;text/javascript&quot;&gt;<br />&nbsp;&nbsp;&nbsp; $(document).ready(function()<br />&nbsp;&nbsp;&nbsp; {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(&quot;#myTable&quot;).tablesorter();<br />&nbsp;&nbsp;&nbsp; });<br />&lt;/script&gt;

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:

$(&quot;#myTable&quot;).tablesorter({ headers: { <br />&nbsp;&nbsp;&nbsp;&nbsp; 1: { sorter:'text' } <br />&nbsp;&nbsp; } });

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:

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

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/

Share.

About Author

7 Comments

  1. Gyorgy Kovacs on

    Hi,
    I’ve experienced problems with types detection when pager plugin was also used, so big thanks for this tip: headers: { 1: { sorter:’text’ } }
    Cheers,
    Gyorgy

  2. Hi,
    I found this post very useful. I was unable to sort the column and Jquery site did not have much information on initial setup. After reading this post, I added pack.js, packer.js and the following line to get my sort working.
    $(“#myTable”).tablesorter({ headers: {      1: { sorter:’text’ }    } });
    Regards,
    Vidya

  3. i tried to create the sample html as mentioned above, but when i open the html i get the error “jQuery is not defined”.
    i have downloaded jquery.tablesorter.pack.js and jquery-1.2.1.js and have included them in the same folder as my html file.

  4. Jeroen van Wilgenburg on

    In the format function you have to convert comma’s to dots and dots to comma’s (of course with a temporary variable so you dont’ end up with comma’s only). Leave the type to numeric and it should work. If it doesn’t work it’s because the type of the number is numeric. Then you have to convert it to a String (concatenate double quotes to the text you want to convert). Maybe you have to do a parseFloat(); It’s possible that Javascript converts the result to a String.

  5. Hi,

    I can’t figure out how to add a custom parser to handle numbers that have commas in them. I have a range of numbers from 0 to 10,000, and I need them sorted correctly.

    Thanks,
    -Roman