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:
-
-
$(document).ready(function()
-
{
-
$("#myTable").tablesorter();
-
}
-
);
-
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.
4.1 rating from 48 votes
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.
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?
Agreed, truly fantastic! Thanks Christian!
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!
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.
In case you haven’t noticed there is a companion plugin called Pager.Example
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.
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();});
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?
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.
That’s really cool. I use it in our corporate product. So it support colspans istead of Ext grid. Just try it!
Really cool indeed, but it will be good if there is drag & drop sort available
Nice work, congrats.
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
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.