This only works in Internet Explorer 5.0

Sorting With Behaviors

I decided to do a behavior of this script so that it would be even easier to use. Click at the table headers to test the sorting or click the button below the table.

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

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 file and assign it to a table using CSS. This can either be done in an inline style attribute or in a style block. Below are the two methods:

<table style="behavior: url('');">...

   table {behavior: url("");}

You should also organise your table into a table head and a table body. If it doesn't have this structure it will behave just like an ordinary table. The table should look like this:


You don't need to include a special CSS file but I recomend 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">

Table Methods

I also created a method so that you can sort the table through scripting. This method is called object.sortByColumn(columnIndex, descending) where columnIndex is the index of the column to sort by (starting at 0) and descending is a boolean flag that describes in which order to sort by.

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

Author: Erik Arvidsson