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 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.
February 24, 2013
February 3, 2013
Very good and lightweight, good job !
Hello,
Under what license is this code? Is it possible to use it in commercial component?
Thanks!
Simple, functional & lightweight. What else can I look for
. Great.
Amazing like everything on this blog.
works great but fails if I change table’s ID or sorter variable name.
Any idea?
@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.
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”
@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);
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!
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
Take a look at:
http://tablesorter.com/
it uses the best JavaScript framework:
http://jquery.com/
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.
Great post as always! Thanks for the mention, we’re proud to be able to contribute.
“tablesorter.com” is perhaps nicer but weights 24K instead of 1.7
Despite I use jQuery, I’ll use for this table sorter instead
Very effective script but it seems it doesn’t work width <thead> tag ?
Awesome! is there a way to make it sort dates in the 11/07/2008 format? Thanks!
I’ve tested it, but it doesn’t work in cells containing links.
It would be great if it could handle link text.
Simply fantastic, we were waiting for such a cool javascript table for our website
crap, table sorters 1000000 millions out there
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?
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..
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
I couldn’t make to give link. Is it make?
Hey, i’m new with javascript things..
well.. how i set up a default sorted columm?
thanks
Very useful for web developers. Marked! Thanks!
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
The init fails to work if there is a link <a> tag inside a cell. Any tips on how to come around this?
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.
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?
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.
Hi,
your work is great!
I have a question: how can I sort correctly date in format dd/mm/yyyy?
Thanks,
Matteo
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?
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
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
How would I make this open with sort descending?
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?
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.
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!
Is it possible to post a documented (comments, meaningful vars) version as well as the optimized version?
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?