Matt RaibleMatt Raible is a Web Developer and Java Champion. Connect with him on LinkedIn.

The Angular Mini-Book The Angular Mini-Book is a guide to getting started with Angular. You'll learn how to develop a bare-bones application, test it, and deploy it. Then you'll move on to adding Bootstrap, Angular Material, continuous integration, and authentication.

Spring Boot is a popular framework for building REST APIs. You'll learn how to integrate Angular with Spring Boot and use security best practices like HTTPS and a content security policy.

For book updates, follow @angular_book on Twitter.

The JHipster Mini-Book The JHipster Mini-Book is a guide to getting started with hip technologies today: Angular, Bootstrap, and Spring Boot. All of these frameworks are wrapped up in an easy-to-use project called JHipster.

This book shows you how to build an app with JHipster, and guides you through the plethora of tools, techniques and options you can use. Furthermore, it explains the UI and API building blocks so you understand the underpinnings of your great application.

For book updates, follow @jhipster-book on Twitter.

10+ YEARS


Over 10 years ago, I wrote my first blog post. Since then, I've authored books, had kids, traveled the world, found Trish and blogged about it all.

RECENT ENTRIES


Tag Cloud


abbie appfuse birthday denver family grails gwt jack java javascript jhipster jsf linkedin maven roller skiing softwaresummit spring springmvc struts2 travel trish vacation webframeworks wicket
« 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 10: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 04:59 PM 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 06: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 02:42 PM 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 06: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 05:08 PM MDT #

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

Posted by Robert C. Morreale on December 02, 2005 at 01:21 AM 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 09:26 AM MST #

Post a Comment:
  • HTML Syntax: Allowed