Table Sorter

A new version of this script is available here.

This JavaScript table sorting script is easy to use, fast and lightweight at only 1.7KB. It includes alternate row formatting, header class toggling, auto data type recognition and selective column sorting. It will currently sort strings, numbers and currency. More features will follow.

To initialize sorting use the following code:

var sorter=new table.sorter('sorter');
sorter.init('sorter',1);

You must create a new table sorter object before initialization. The parameter taken by table.sorter is the variable name used for the object. The object.init function takes 2 parameters: the id of the table and the index of the initially sorted column (optional). If you want to exclude a column from sorting then add class=”nosort” to the appropriate table header. The styling of the table is totally customizable via CSS.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source code.

I would also like to thank my first sponsor, WebbyNode, and encourage you all to sign up for their beta Xen VPS Service by visiting their website.

Posted by Michael in JavaScript on November 4, 2008

67 Responses

Simple, great!

Thanks.

Octavio on November 05, 2008 at 1:07 am

Very good, congratulations!

Murat Çorlu on November 05, 2008 at 2:02 am

Very good and lightweight, good job !

damdec on November 05, 2008 at 2:09 am

Hello,

Under what license is this code? Is it possible to use it in commercial component?

Thanks!

Tester on November 05, 2008 at 2:38 am

Simple, functional & lightweight. What else can I look for :) . Great.

Umut on November 05, 2008 at 6:21 am

Amazing like everything on this blog.

Daniel Lopes on November 05, 2008 at 9:17 am

works great but fails if I change table’s ID or sorter variable name.
Any idea?

Yvan on November 05, 2008 at 10:52 am

@Tester – It is free for commercial applications and is not released under any specific license.

@Yvan – Yes, it would. You would also have to change the ID of the table in the init function and the sorter object would need to take the new name of the object as the parameter.

Michael on November 05, 2008 at 10:56 am

It ID should be sortable….

manS on November 05, 2008 at 1:34 pm

maybe I do something wrong but it still does not work (FF 3.0.3 & IE 6)
I change the following lines:
<table cellpadding=”0″ cellspacing=”0″ border=”0″ class=”sortable” id=”sorter2″>
var sorter=new table.sorter(“sorter2″);
sorter.init(“sorter2″,1);

Error console of FF return “sorter2 is not defined”

Yvan on November 05, 2008 at 1:37 pm

@manS = No it shouldn’t. I have added the class=”nosort” to disable sorting for that column.

@Yvan = It would be as follows…

var sorter2=new table.sorter(“sorter2″);
sorter.init(“sorter2″,1);

Michael on November 05, 2008 at 1:39 pm

thanks, it works now but you made a small mistake:

sorter2.init(“sorter2″,1);

I think that this point is unclear in the instructions.
Goog job!

Yvan on November 05, 2008 at 1:49 pm

Good script. Very concise. And if you apply YUI compression (http://developer.yahoo.com/yui/compressor/) it will likely be even smaller in kb!

Thanks again

Timothy Marshall on November 05, 2008 at 2:48 pm

Take a look at:
http://tablesorter.com/
it uses the best JavaScript framework:
http://jquery.com/

Eduardo on November 05, 2008 at 4:08 pm

You should make an “on document ready” -function and rewrite all your scripts to use that + release some more of these actually useful scripts (yes, there are plenty less-then-useful ones out there). Then you could release a sort of library where the core more or less only had the on domready function and everything else was bits and pieces that could be deployed ON-demand.

The problem with the more popular JS-libraries nowadays is that they come with such a huge and often unneeded overhead that is more suited for web applications and not really your every day website. That’s were your scripting really could shine. :)

Tommie Hansen on November 06, 2008 at 1:01 pm

Great post as always! Thanks for the mention, we’re proud to be able to contribute.

carlos@webbynode on November 06, 2008 at 3:06 pm

“tablesorter.com” is perhaps nicer but weights 24K instead of 1.7
Despite I use jQuery, I’ll use for this table sorter instead :-)

Andrea on November 07, 2008 at 3:02 am

Very effective script but it seems it doesn’t work width <thead> tag ?

Dexter on November 07, 2008 at 6:21 am

Awesome! is there a way to make it sort dates in the 11/07/2008 format? Thanks!

Heather on November 07, 2008 at 2:57 pm

I’ve tested it, but it doesn’t work in cells containing links.
It would be great if it could handle link text. :)

Andrea on November 08, 2008 at 12:55 pm

Simply fantastic, we were waiting for such a cool javascript table for our website

Social Networking Website for Charity on November 08, 2008 at 2:35 pm

crap, table sorters 1000000 millions out there

john carpenter on November 08, 2008 at 3:54 pm

Thanks dude, that’s pretty cool =)

kovshenin on November 10, 2008 at 7:19 am

love this tablesorter. just one thing. try to add names like Àngel and Óscar. these are common spanish names. they are placed at the end/beginning when you sort. any solution?

Thomas on November 11, 2008 at 4:15 am

This is a very useful tool for me. But during my testing on this table sorter that is not only lightweight but very useful, I found out that there will be a time that a user will look for the functionality or having a primary sort then secondary then third sort.. what I mean to say is sort everything by First Name then the result can you please sort to email address then the result to phone… because its doable but takes a lot of time … I guess…

But all in all I hope your the first one who can do it..
So time by time I guess I will be visiting your site for updates..

Uchiha Madara on November 11, 2008 at 6:55 pm

Hi Michael, great blog and thanks for the javascript goodies!!

I am using your table sorter in an asp .net site I am working, I am loading the table sorter when my update panel updates with a table!
This works but the sorter script fails somewhere along the line, the table headers are clickable but they do not sort and there are no sort images displayed.
Any ideas? I am pretty new to this so maybe I am missing something?
Thanks

Andy Timney on November 14, 2008 at 8:24 am

I couldn’t make to give link. Is it make?

hackerfriend on November 15, 2008 at 1:34 am

Hey, i’m new with javascript things..
well.. how i set up a default sorted columm?

thanks

Robert on November 21, 2008 at 1:09 am

Very useful for web developers. Marked! Thanks!

Alp Bahar on November 23, 2008 at 11:03 am

Looks great. Thanks!

Emanuil on December 03, 2008 at 4:58 am

Hi,

First i thank for your good script…
i have one question’
i applied pagination with this script
i got error like” at line 53
var i=parseFloat(f.replace(/(\$|\,)/g,…,n=parseFloat(c.replace(/(\$|\,)/g,”));
Please help me solve the problem

Thanks
with Regards
S.Rajkumar

rajkumar on December 03, 2008 at 7:08 am

The init fails to work if there is a link <a> tag inside a cell. Any tips on how to come around this?

Duveit on December 05, 2008 at 7:54 am

As in, when you have a column, that has a nosort header, filled with links. The sorting still works, but the init fails to iterate the cell due to a error with compare, “f is null”. As far as I can tell, the only downside is that the cells doesnt get their classes set, and thus not whatever colors for “odd” “even”.

I could get past this by parsing the table with odd evens from php, but it’d less elegant, and the script would always produce a error once loaded.

Duveit on December 05, 2008 at 9:05 am

Hello.

Is there a solution concerning the link Problem? Sorting works but:
a) the javascript error is ugly and
b) if you sort the table with column A and you want to set the sorting to column B then it takes 2 clicks to sort it. first click removes the sorting of column A and second click sets the new sorting

any ideas?

Martin on January 05, 2009 at 8:15 am

Love this…great that it’s completely customizable. The only issue I saw was what Martin posted, have to un-click a sort before you can click a sort.

Arif Gangji on January 12, 2009 at 12:58 am

Hi,
your work is great!
I have a question: how can I sort correctly date in format dd/mm/yyyy?

Thanks,
Matteo

Matteo on January 13, 2009 at 4:22 am

Very nice. Has anyone in this forum been able to find a function that allows the user to select 2-4 products and have their tables display side-by-side, similar to how cnet.com shows their product reviews?

Harry on January 15, 2009 at 12:04 pm

sample link that explains my above comment a bit more clearly:
http://reviews.cnet.com/digital-cameras/nikon-d3-body-only/4540-6501_7-32578698-4.html?tag=rnav

Harry on January 15, 2009 at 12:55 pm

Ok i just found a solution for the problem with the links.

You have to adapt the work-function a bit.

Instead of:

for(i=0;i<this.l;i++){
this.a[i].o=i+1; var v=this.r[i+1].cells[y].firstChild;
this.a[i].value=(v!=null)?v.nodeValue:”
}

use this:

for(i=0;i<this.l;i++){
this.a[i].o=i+1;
var v=this.r[i+1].cells[y];
while(v.hasChildNodes())v=v.firstChild;
this.a[i].value=(v.nodeValue!=null)?v.nodeValue:”
}

It’s not excessively tested, but works wherever i use it.

so long,
Martin

Martin on January 21, 2009 at 3:59 am

How would I make this open with sort descending?

rcjordan on January 24, 2009 at 1:17 pm

Great, but many of my tables have collumns with dates in the format dd-mm-yyyy. Is it possible to adjust the script so these dates are sorted correctly?

Dirk Prop on February 06, 2009 at 1:48 pm

I enjoy using your script, but the only issue I have, well is attempting to access the function of “greybox” when sorter is accessed, can you help me to correct this sorter, so that while the table is sorted by the change in header, that function does not affect my greybox, I mean links open, but I need different content to opened through “greybox” within my table, so any help will be greatly appreciated.

Singh on February 08, 2009 at 10:14 pm

Hi!
This script is great!
Question: How can i use it to accentuated letters?
For example: Ádám, Éva…(hungarian names)
It’s possible?
THX!

The Priest on February 12, 2009 at 10:03 am

Is it possible to post a documented (comments, meaningful vars) version as well as the optimized version?

hotSauce on February 26, 2009 at 2:22 pm

Amaizing,thank you very much for yet another very useful script.

i have a question: is it possible to set filed width?
i have few cells with lots of text but when i put width and display:block;
it mess things up,without the display property it doesnt set the width?

Genia on March 08, 2009 at 12:48 pm
Comments are closed at this time.