<table> element offers an efficient way of presenting interrelated data. Borders and background colours can add enormously to the cohesion and meaning. To make the table sortable by clicking a column header is the object of this script. A longer example demonstrates the fixed header row.
Different types of data require different sorting algorithms. The kind of information in a column is a parameter that must be passed to the initializing function. Scripts that sort out the type of data used in a column, have proven to be unreliable or difficult to customize. The types currently recognized by the script are:
|Sorts alphabetically, case insensitive. The default.|
|Sorts alphabetically, case sensitive.|
|Sorts dates chronologically, expressed in any format recognized by the built-in
|Sorts by the outerHTML string, including attributes.|
|Sorts by the length of the text in the cell, shortest first.|
|Sorts alphabetically, disregarding prefixes such as
|Sorts by the contents of the first
|Sorts strings of format
By preceding the code word with the letter
r, the default order is reversed, for example
rdate sorts by "newest first" and
rtime by "longest first". Adding new sorting functions with sorting algorhytms for other types is as easy as writing them, if the naming conventions in the code are followed.
A cookie is set to remember the last column sorted, so when a visitor returns to the page, the table will appear as he left it.
The data in this table has clearly been sought out merely to demonstrate extreme cases of sorting dilemma's. Click a column header to sort by that column.
|First Name||Last Name||Born||Time||Number|
|Sinead||O'Connor||8 December 1966||01:23||0|
|Jacques||'s Jacob||28 July 1902||12:32||9.3|
|Ludwig||Van Beethoven||17 December 1770||12:31||93|
|Clemens||Von Franckenstein||14 July 1875||01:12:32||9.3|
|Giuseppe||di Stefano||24 July 1921||11:02||7.89|
|Eddie||Van Halen||26 January 1955||21:30||1.92|
|Bart||Simpson||17 December 1979||02:41:12||12|
The required html code for the above table consists of two scripts and a table. The first script includes the library, the second calls the initializing function.
Scripts generally belong in the document
head section. However, the order of elements in the above example, with the last
script after the
table, allows the initialization to be done with the required parameters, before and independent of the