The Design of Software (CLOSED)

A public forum for discussing the design of software, from the user interface to the code architecture. Now closed.

The "Design of Software" discussion group has been merged with the main Joel on Software discussion group.

The archives will remain online indefinitely.

Simple web table sorting

I have a web-based UI with a table of data that I want the user to be able to sort by clicking on column heads as is fairly common in many UIs.  My web pages already require JavaScript but are far from AJAX or Web 2.0 or anything so trendy. 

I think that my optiosn are:

1) When the column head is clicked, submit a new request that includes the sort column in the CGI arguments so that when the page is redisplayed, it's sorted as desired.  This shouldn't be too bad because the size of the table isn't very big.

2) Have the CGI generate JavaScript that has the data in it and can sort and redisplay it locally when the column heads are clicked.

Any thoughts on the relative merits of the two approaches?  I'd think that functionally, from the users' perspective, they'd be the same but for performance.  Is one approach more scalable?  Reliable?  Common?  Am I missing an alternative that's better?
Chris Nelson Send private email
Thursday, August 03, 2006
 
 
I just switched to JavaScript-based sorting, and I love it. It's much faster and more convenient for the users, and it can actually make your sorting task somewhat easier.

Basically, you want to load the TRs into an array, sort the array by the appropriate column, put the sorted TRs into a new documentFragment, and insert that back into the HTML. For an example, check out the table sorting chapter in Nicholas Zakas' "JavaScript for Web Developers."

You'll need to give JS some way of knowing how to sort the various data types in your table. For basic numbers, dates, and strings, you can write some generic JS functions, and this should cover most of your columns. For more complex data types, you have a couple options. You can write a custom JavaScript function to parse the data type. Or you can generate sortable keys on the server, and put them into the table so the JS can read them, e.g. <td class="sort_051120051234">

I would avoid your second option, having the CGI generate the JavaScript. It ties them together a little too much. With the above approach, you can write a generic JavaScript class and reuse it for all of your tables.
JW
Thursday, August 03, 2006
 
 
Do documentFragments work with IE6?
John Topley Send private email
Thursday, August 03, 2006
 
 
Berislav Lopac Send private email
Thursday, August 03, 2006
 
 
John - yep, although I don't think they work with IE5. You can do it without the documentFragment, but it makes it faster to re-display the sorted table.
JW
Thursday, August 03, 2006
 
 
JW - Thanks. I was getting it confused with the DOM Range API, which IE6 doesn't support.
John Topley Send private email
Thursday, August 03, 2006
 
 
Forgot to mention one thing - using JavaScript is only possible if you're displaying the entire table at once. So if you're going to page through the data with next/previous buttons, your only option is #1 above.
JW
Thursday, August 03, 2006
 
 
l belk
Thursday, August 03, 2006
 
 

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics
 
Powered by FogBugz