Sample

Just click at the table headers to sort by that column

Item Name Date
Item 3 Steven 950227
Item 2 Emil 990227
Item 1 Erik 990228
Item 4 Scott 960227
Item 7 Fabian 970227
Item 6 Thomas 900227
Item 5 Mike 880227
Item 8 Adam 930227
Item 11 Bill 940227
Item 10 Marc 890227
Item 9 Linus 980227
Item 12 Ronald 960227
Item 15 Peter 950227
Item 14 Carlos 910227
Item 13 Paul 920227
Item 16 Arnold 960227

Below is a table that is using a custom attribute called type in each header cell to define how to sort the column.

String String Number Date
apple Strawberry 45 2001-03-13
Banana orange 7698 1789-07-14
orange Banana 4546 1949-07-04
Strawberry apple 987 1975-08-19
Pear blueberry 98743 2001-01-01
blueberry Pear 4 2001-04-18

What do I need to use this

You need to download tablesort.js file and include it by adding the following line to your document HEAD:

<script type="text/javascript" src="tablesort.js"></script>

You also need to organise your table into a table head and a table body and add the onclick handler to the table tag. The table should look like this:

<table onclick="sortColumn(event)">
<thead>
	<tr>...</tr>
	...
</thead>
<tbody>
	<tr>...</tr>
	...
</tbody>
</table>

You don't need to include a special CSS file but I recommend that you do it anyway because that the arrow should use the webdings font. Download tablesort.css and add the following line to the HEAD:

<link rel="STYLESHEET" type="text/css" href="tablesort.css">

What's next

If you want I could convert this into a behavior for IE5 when it is released and I could also modify it so that you don't have to add the onclick handler manually. Mail me if there is a demand for this.




Defining the sort
Manipulating the DOM tree
Demo and instructions how to use it in your pages
Sorting with behaviors

Author: Erik Arvidsson