4
Nov

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 Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome. Please send any bug reports to michael@leigeber.com with the title “BUG REPORT”. This script is available for any personal or commercial projects and is offered AS-IS, no free support provided.

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.



5 Diggs Spread This

67 Responses


Simple, great!

Thanks.

Octavio on 05 Nov 2008 at 1:07 am

Very good, congratulations!

Murat Çorlu on 05 Nov 2008 at 2:02 am

Very good and lightweight, good job !

damdec on 05 Nov 2008 at 2:09 am

Hello,

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

Thanks!

Tester on 05 Nov 2008 at 2:38 am

Great!!!

Gustavo Ribeiro on 05 Nov 2008 at 6:00 am

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

Umut on 05 Nov 2008 at 6:21 am

Amazing like everything on this blog.

Daniel Lopes on 05 Nov 2008 at 9:17 am

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

Yvan on 05 Nov 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 05 Nov 2008 at 10:56 am

[...] JS Table Sorter [...]

Ethan’s Blog » Blog Archive » Yay! on 05 Nov 2008 at 11:32 am

It ID should be sortable….

manS on 05 Nov 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 05 Nov 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 05 Nov 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 05 Nov 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 05 Nov 2008 at 2:48 pm

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

Eduardo on 05 Nov 2008 at 4:08 pm

[...] JavaScript Table Sorter – Web Development Blog 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. (tags: web-developer web-developer/javascript reference) [...]

links for 2008-11-05 at James A. Arconati on 05 Nov 2008 at 9:30 pm

[...] Sort your tables with no effort and no huge libraries like prototype or jquery (even if I am a big fan of jQuery, I can’t use it on every single project, especially when is a small project) [...]

Some links | Ionut Staicu - Webdeveloper Blog on 06 Nov 2008 at 4:43 am

[...] JavaScript Table Sorter [...]

Useful Links (06/11/2008) | Apramana on 06 Nov 2008 at 7:12 am

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 06 Nov 2008 at 1:01 pm

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

carlos@webbynode on 06 Nov 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 07 Nov 2008 at 3:02 am

[...] Geschrieben hat das Script Michael Leigeber, ein Website Entwickler aus Alabama, der das JavaScript auf seiner Website kostenlos zum Download [...]

Tabellen per JavaScript sortieren at Blog.Tocki on 07 Nov 2008 at 4:35 am

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

Dexter on 07 Nov 2008 at 6:21 am

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

Heather on 07 Nov 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 08 Nov 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 08 Nov 2008 at 2:35 pm

crap, table sorters 1000000 millions out there

john carpenter on 08 Nov 2008 at 3:54 pm

<strong>JavaScript Table Sorter…</strong>

Easy to use, fast and lightweight JavaScript table sorting script at only 1.7KB. It includes alternate row formatting, header class toggling, auto data type recognition and selective column sorting.
……

Visual-Blast Media on 09 Nov 2008 at 1:48 pm

Thanks dude, that’s pretty cool =)

kovshenin on 10 Nov 2008 at 7:19 am

[...] Leigeber vine cu un nou Table Sorter javascript de 1.7k ce nu are nevoie de niciun framework si poate fi comprimat si mai [...]

iulian.anghel » Blog Archive » Monday Script News (1) on 10 Nov 2008 at 12:43 pm

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 11 Nov 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 11 Nov 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 14 Nov 2008 at 8:24 am

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

hackerfriend on 15 Nov 2008 at 1:34 am

[...] November 8, 2008, 7:13 This news item was posted in Resources category and has 0 Comments so far. JavaScript Table Sorter is a lighweight code (1.7kb) for transforming standard tables into a sortable [...]

Lightweight JavaScript Table Sorter | SulVision on 19 Nov 2008 at 6:53 pm

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

thanks

Robert on 21 Nov 2008 at 1:09 am

[...] JavaScript Table Sorter – Web Development Blog – 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 [...]

Daily del.icio.us for November 18th through November 22nd — Vinny Carpenter's blog on 22 Nov 2008 at 8:02 pm

Very useful for web developers. Marked! Thanks!

Alp Bahar on 23 Nov 2008 at 11:03 am

[...] آدرس متن اصلی که این مطلب رو از روش ترجمه کردم هم اینجاست. [...]

يك مهندس كامپيوتر » بایگانی وب‌نامه (وبلاگ) » JavaScript Table Sorter on 23 Nov 2008 at 10:26 pm

[...] You can read the full story here. [...]

JavaScript Table Sorter | Ajaxonomy on 26 Nov 2008 at 1:45 pm

[...] en Javascript Con este script podremos ordenar datos en en una sencilla tabla: Descarga y m

Tabla en Javascript - Addictools Forum on 01 Dec 2008 at 11:32 am

Looks great. Thanks!

Emanuil on 03 Dec 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 03 Dec 2008 at 7:08 am

[...] Un pequeño script (1.7 KB) para cuando necesitamos ordenar datos contenidos en una tabla de manera sencilla. Funcional en IE, Firefox, Opera, Safari y Chrome. Ver Demo [...]

JavaScript Table Sorter on 04 Dec 2008 at 6:14 pm

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 05 Dec 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 05 Dec 2008 at 9:05 am

[...] Un pequeño script (1.7 KB) para cuando necesitamos ordenar datos contenidos en una tabla de manera sencilla. Funcional en IE, Firefox, Opera, Safari y Chrome. Ver Demo [...]

JavaScript Table Sorter | Mantis Technology Solutions Blog on 04 Jan 2009 at 2:10 pm

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 05 Jan 2009 at 8:15 am

[...] JavaScript Table Sorter – Web Development Blog “This JavaScript table sorting script is easy to use, fast and lightweight at only 1.7KB. Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome. The styling of the table is totally customizable via CSS.” Unobstrusively makes an existing table sortable. (tags: javascript table sorting ) [...]

2008-11-11 « My Blog on 05 Jan 2009 at 3:28 pm

[...] Un pequeño script (1.7 KB) para cuando necesitamos ordenar datos contenidos en una tabla de manera sencilla. Funcional en IE, Firefox, Opera, Safari y Chrome. Ver Demo Publicado en Javascript, scripts [...]

JavaScript Table Sorter at Blog Borchani Studios on 06 Jan 2009 at 3:24 pm

[...] JavaScript Table Sorter – Web Development Blog “This JavaScript table sorting script is easy to use, fast and lightweight at only 1.7KB. Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome. The styling of the table is totally customizable via CSS.” Unobstrusively makes an existing table sortable. (tags:javascript table sorting ) [...]

2008-11-11 « My Blog on 09 Jan 2009 at 9:07 pm

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 12 Jan 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 13 Jan 2009 at 4:22 am

[...] Link [...]

Webmasterkit.info » Sortable Tables on 14 Jan 2009 at 4:31 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 15 Jan 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 15 Jan 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 21 Jan 2009 at 3:59 am

How would I make this open with sort descending?

rcjordan on 24 Jan 2009 at 1:17 pm

[...] Table Sorter – Web Development Blog By mohangk JavaScript Table Sorter – Web Development Blog “This JavaScript table sorting script is easy to use, fast and lightweight at only 1.7KB. [...]

JavaScript Table Sorter - Web Development Blog « My Blog on 26 Jan 2009 at 12:17 am

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 06 Feb 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 08 Feb 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 12 Feb 2009 at 10:03 am

[...] JavaScript Table Sorter est un petit JavaScript propose par Leigeber.com. Comme pour tous les scripts présentés sur ce site (que je trouve exceptionnel), le programme fait l’objet d’un soin particulier et le code est aussi minime que possible. [...]

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 on 24 Feb 2009 at 7:17 pm

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

hotSauce on 26 Feb 2009 at 2:22 pm

[...] result sent over the Internet. I’ve found a JavaScript Table Sorter, which was developed by LIEGEBER and it’s pretty easy to [...]

Sorting data made easy using JavaScript table sorter at AjaxApp.com, ajax app and cool web apps! on 05 Mar 2009 at 10:14 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 08 Mar 2009 at 12:48 pm
Comments are closed at this time.
RSS Feed | Email
Powered by FeedBurner
Recent Links