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 in JavaScript on November 4, 2008
  • http://damdec.fr damdec

    Very good and lightweight, good job !

  • Tester

    Hello,

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

    Thanks!

  • http://www.webresourcesdepot.com Umut

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

  • http://www.areacriacoes.com.br Daniel Lopes

    Amazing like everything on this blog.

  • Yvan

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

  • http://www.leigeber.com Michael

    @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.

  • Pingback: Ethan’s Blog » Blog Archive » Yay!

  • Yvan

    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”

  • http://www.leigeber.com Michael

    @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);

  • Yvan

    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!

  • http://www.duzodesign.com Timothy Marshall

    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

  • http://edpeur.blogspot.com/ Eduardo

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

  • Pingback: links for 2008-11-05 at James A. Arconati

  • Pingback: Some links | Ionut Staicu - Webdeveloper Blog

  • Pingback: Useful Links (06/11/2008) | Apramana

  • http://www.dekorfilm.se Tommie Hansen

    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. :)

  • http://www.webbynode.com carlos@webbynode

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

  • Andrea

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

  • Pingback: Tabellen per JavaScript sortieren at Blog.Tocki

  • Dexter

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

  • Heather

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

  • Andrea

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

  • http://www.coolchrist.com Social Networking Website for Charity

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

  • john carpenter

    crap, table sorters 1000000 millions out there

  • Pingback: Visual-Blast Media

  • Pingback: iulian.anghel » Blog Archive » Monday Script News (1)

  • http://www.thomeu.es Thomas

    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?

  • Uchiha Madara

    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..

  • http://www.andytimney.com/blog Andy Timney

    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

  • http://hackerfriend.net hackerfriend

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

  • Pingback: Lightweight JavaScript Table Sorter | SulVision

  • http://www.forbishare.com Robert

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

    thanks

  • Pingback: Daily del.icio.us for November 18th through November 22nd — Vinny Carpenter's blog

  • http://www.argesistem.com Alp Bahar

    Very useful for web developers. Marked! Thanks!

  • Pingback: JavaScript Table Sorter | Ajaxonomy

  • Pingback: Tabla en Javascript - Addictools Forum

  • rajkumar

    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

  • Pingback: JavaScript Table Sorter

  • Duveit

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

  • Duveit

    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.

  • Pingback: JavaScript Table Sorter | Mantis Technology Solutions Blog

  • Martin

    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?

  • Pingback: 2008-11-11 « My Blog

  • Pingback: JavaScript Table Sorter at Blog Borchani Studios

  • Pingback: 2008-11-11 « My Blog

  • http://www.neonrain.com/blog/category/coding/ Arif Gangji

    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.

  • Matteo

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

    Thanks,
    Matteo

  • Harry

    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

    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

  • Martin

    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

  • rcjordan

    How would I make this open with sort descending?

  • Pingback: JavaScript Table Sorter - Web Development Blog « My Blog

  • http://www.vwggooi.nl Dirk Prop

    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?

  • Singh

    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.

  • http://www.szanalmas.hu The Priest

    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!

  • Pingback: JavaScript Table Sorter, trier vos tableaux| Webmaster - Ressources et outils gratuits pour votre site internet - Free Tools| Free Tools, Le meilleur des outils gratuits pour webmaster

  • hotSauce

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

  • Pingback: Sorting data made easy using JavaScript table sorter at AjaxApp.com, ajax app and cool web apps!

  • Genia

    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?