Examples showing tables sorted with the JavaScript SortableTable class.

Features

Example 1
Live sorting turned off. Sorted by descending date. Table sorting triggered through body onLoad.

Note that neither the header nor footer rows are included in the sort.

indexcol 1col 2date
1af 21 Apr 2004 - 23:17
2be 21 May 2004 - 03:15
11cd 25 Mar 2004 - 22:34
footer 1footer 2footer 3footer 4

Even though live sorting is turned off, the table can still be sorted using other means. In this case, the sort is triggered by clicking one of the following buttons.

Example 2
Table that uses THEAD and TFOOT; live sorting turned on. Note the empty space in the string column.

The live sort indicators < and > are added automatically to the last header row. For live sorting, column type is marked 'a' for auto, meaning that the code tries to determine the data type based on the first non-empty cell.

Since the first cell in the header row above the data spans two cells, the sort buttons over the first two columns only work on the first column.

col 0col 1col 2col 3
indexstringdate
footer 1footer 2footer 3footer 4
1af 21 Apr 2004 - 23:17
2d 21 May 2004 - 03:15
11cd 25 Mar 2004 - 22:34

Example 3
Headless table, sorted by 3rd column. Sorting triggered through body onLoad.

1af 21 Apr 2004 - 23:17
2be 21 May 2004 - 03:15
11cd 25 Mar 2004 - 22:34

author: Bob Matlin
contact: bmatlin@matlinsoftwareservices.com