Raible Designs

« www.struts.ru | Main | RE: How do they do... »

Tuesday February 11, 2003

Client-side Sorting with the DOM I'm amazed at how easy it is to sort an HTML table with the DOM and JavaScript. I whipped up a quick modification of Porter's Sort Table Rows demo. The basic enhancements I made where removing the <a>'s from the table headers, and just adding an onclick handler to the <th>'s. I also added indicators to display the the current column/direction that's sorted. Seems to work in most of the browsers too! On Windows 2000, this includes IE6, IE5.5, Opera 7 and Phoenix 0.5. On OS X, the latest versions of Safari, Chimera, IE, Mozilla and Netscape. It doesn't work on OmniWeb, and the cursor: pointer doesn't work on the <th>'s in IE/Mac and IE5.5/Win. Anyway, you can checkout the demo or download with the relevant HTML, .gif and .js files. I've also included it below for your convenience.

I'd love to add this sort of capability to the display tag library. Posted in The Web at Feb 11 2003, 12:54:38 PM MST 8 Comments

Comments:

Man, that is slick!!

Posted by Lance on February 11, 2003 at 04:14 PM MST #

Thanks, for letting me mirror it! for those readers that want to mirror this : don't forget to include the client_side_sorting_demo_files folder.

Posted by Cesar Sandoval on February 12, 2003 at 10:59 AM MST #

Nice script, but one slight problem. Be more careful examination you will see the script is not calling any of the numeric sorting functions. The onclick event handler is not passing the arguments for the column types. A simple alert in the function will show this!

Posted by Tom on January 26, 2004 at 12:50 PM MST #

This looks great, but it doesn't actually sort anything. It just reverses the 'rank' order when any of the links are clicked.

Posted by Gary Burke on May 10, 2004 at 08:42 AM MDT #

[Trackback] I just found a cool post by Matt Raible on how to sort tables on the (web-)client-side (without round-trip to the server). This is extremly cool in combination with my favourite JSP tag libraray Displaytag....

Posted by kleineikenscheidt/stefan on September 16, 2004 at 12:50 PM MDT #

Very nice. Don't suppose you'd help me get this to work with multiple tables on the same page? I'm thinking something like this for a table called "inProgress" and a table called "locked": <body onload="initTable('inProgress', new Array('number', 'date', null, null, 'dollar')); initTable('locked', new Array('number', 'date', null, null, 'dollar'))"> But that's only getting the first table to work. I tried seperate onload properties, but that's not valid code (and didn't work). You'll also see I'm trying to sort a column of type 'date'. In the table the values are written 11-JUL-05, etc and it's not working correctly (just sorting on day value and not month or year). Does JavaScript have a date type? If so what format do the values ahve to be written in? Thanks for any guidance you can provide!

Posted by Roman on June 29, 2005 at 11:08 AM MDT #

does anyone here know how to get displaytag to sort a column with links?

Posted by Robert C. Morreale on December 01, 2005 at 07:21 PM MST #

Hi I dont think its sorted well in terms of prices. I wanted something like that in my report and was searching for that. basically i want to design a reporting tool for my firm. i'm using DT for that, but since the underlying beans are also populated with strings representing fields, i'm facing problems with sorting data for date and number fields. Any suggestions on it would help. Thanx --Nagraj

Posted by Nagraj on December 13, 2005 at 03:26 AM MST #

Sun	Mon	Tue	Wed	Thu	Fri	Sat
« May 2012
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Today

Search This Site

Recent Entries

Tag Cloud

Navigation