This only works in Internet Explorer 5.0
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 |
You need to download tablesort.htc 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('tablesort.htc');">...
<style>
table {behavior: url("tablesort.htc");}
</style>
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:
<table> <thead> <tr>...</tr> ... </thead> <tbody> <tr>...</tr> ... </tbody> </table>
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">
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