Thursday, August 23rd, 2007

Table Sorting Made Easier

Category: jQuery

Christian Bach has released v2.0 of his tablesorter plugin for jQuery:

Tablesorter sorts HTML tables with as little as one line of code and includes many advanced features like:

  • Multiple column sorting
  • Custom cell parsers
  • Extensibility via widget system
  • Support for ROWSPAN and COLSPAN on TH elements

all packed into 7.4kb of code. Also released are two table themes, a cookie-based preferences widget, a row striping widget and pagination plugin.

The small snippet below takes a pre-existing HTML table and makes it sortable:

javascript

  1. $(document).ready(function()
  2.     {
  3.         $("#myTable").tablesorter();
  4.     }
  5. );

Tablesorter has been tested successfully in the following browsers with Javascript enabled:

  • Firefox 1.5+
  • Internet Explorer 6+
  • Safari 2+
  • Opera 9+
  • Konqueror

Be sure to check out the demos and pick up the source.

Posted by Rey Bango at 6:16 am
16 Comments

++++-
4.1 rating from 75 votes

16 Comments »

Comments feed TrackBack URI

It’s a truly fantastic plugin for jQuery, even supporting plugins or widgets it’s self. Checkout the great pager widget.

Don’t know where I would be without it.

Comment by James Dempster — August 23, 2007

Very slick! I love jQuery plugins. Unfortunately I don’t think I’d ever find a use for it since all tables I deal with are typically paginated and server-side generated. Looks like it would work great on simple, one page lists, though.

Have you benchmarked it to see how well it performs with hundreds of rows?

Comment by Brian — August 23, 2007

Agreed, truly fantastic! Thanks Christian!

Comment by Daniel Larsson — August 23, 2007

I too would really like to see some benchmarks on a very (very) large number of rows (1000+, I know, “go with paging”, but it’s not a perfect world).

I’ve tried a dozen or more “sort functions” but ultimately wrote my own to manage 1000+ rows. But would consider a full application switch to jQuery if this thing performs.

Either way, it’s a nice piece of work!

Comment by PR — August 23, 2007

It degrades nicely for IE4 & 5 (minus some javascript errors) the data still appears and is styled correctly, just no sort functionslity. Unfortunately in IE5.5 it crashes the entire browser.

Comment by Chris Phillips — August 23, 2007

If you are planning to write a jQuery plugin, you should aim to use a verb as the name. By convention, nouns should be used for constructors and verbs for methods.

Comment by Jordan — August 23, 2007

This is a great LIBRARY.

if you want to make all the tables on a page sortable you can call them by them them by class and activate them:

$(document).ready(function(){ $(“.tablesorter”).tablesorter();});

Comment by Ryan — August 23, 2007

if the date is mm/dd/yy instead of mm/dd/yyyy I guess I need to write a parser like you do to sort good,medium,bad?

Comment by Ryan — August 23, 2007

The Pager plugin is nice but… correct me if I am wrong… one of the major reasons for pagination (besides UI Niceness) is so that you do not have to retrieve all of the rows. Using the Pager plugin, however, you would have to retrieve ALL rows from the database just to load the first set of results.

But I guess it all comes down to your data… if you have a few hundred rows this would probably be okay. If you have 1000+, maybe a nice little AJAX call would be appropriate to retrieve the next/previous page and re-sorting.

Comment by Ryan Lowe — August 23, 2007

That’s really cool. I use it in our corporate product. So it support colspans istead of Ext grid. Just try it!

Comment by Serg — August 24, 2007

Really cool indeed, but it will be good if there is drag & drop sort available

Comment by RStankov — August 24, 2007

Nice work, congrats.

Comment by Fabio Zendhi Nagao — August 26, 2007

I needed something like this but, I don’t use JQuery and mostly use JSON from the server.
This inspired me to code up a rough JSON to sortable table hack some people might find useful.
I usually throw my pagination junk in the footer and I left that out of the demo (as well as AJAX-JSON calls).
One thing I wanted is to support unix timestamps natively with a sort.
Check the demo out here:
JSON Data Grid
email me any ideas/suggestions – mm_donohue at yahoo.com

Comment by Matt Donohue — August 27, 2007

This is REALLY nice. I’ve never done any JS before and had this up and running with cookies and paging in under an hour. I’m playing with customizing the paging display, but for small data sets (say under 1000 records) this is great.

Comment by Peter Bell — August 27, 2007

Would love to see an example of someone using an ajax call with over 1000 rows!! Otherwise, very nice.

Comment by zadro — June 23, 2010

I agree with Ryan (above) that the whole idea of pagination is to prevent loading a lot of data into the client. I used tablesorter for a project which looked great and worked great, but 1000+ rows and it comes to a grinding halt. It wasn’t too bad as the application was on a LAN, but I wouldn’t use this for a website.

If there’s a way of handling the paging/sorting on the server-side then I’d definitely give this two thumbs up as it looks sweet.

Comment by lottemae — March 13, 2012

Leave a comment

You must be logged in to post a comment.