JavaScript Table Sorter

JavaScript Dropdown Menu with Multi Levels »

4
Nov

Posted by Michael in JavaScript

Table Sorter

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

50 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

Trackback URI | Comments RSS

JavaScript Table Sorter

50 Responses

Leave a Reply