4umi.com/web/javascript/tablesort

Sort ‘n’ Scroll

Table Javascript

The html <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.

Types of data

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:

TypeDescription
nullSorts alphabetically, case insensitive. The default.
caseSorts alphabetically, case sensitive.
dateSorts dates chronologically, expressed in any format recognized by the built-in Date.parse() method.
htmlSorts by the outerHTML string, including attributes.
lengthSorts by the length of the text in the cell, shortest first.
nameSorts alphabetically, disregarding prefixes such as Van and De la.
numberSorts numerically.
spanSorts by the contents of the first <span> element in the cell.
timeSorts strings of format hh:mm:ss by duration, shortest first. Hours and minutes are optional.

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 example

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 NameLast NameBornTimeNumber
SineadO'Connor8 December 196601:230
Jacques's Jacob28 July 190212:329.3
LudwigVan Beethoven17 December 177012:3193
ClemensVon Franckenstein14 July 187501:12:329.3
Giuseppedi Stefano24 July 192111:027.89
EddieVan Halen26 January 195521:301.92
BartSimpson17 December 197902:41:1212

The code

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.

<head>
...
<script src="http://4umi.com/web/javascript/sortable.js" type="text/javascript"></script>
</head>
<body>
...
<table id="myTable">
 <thead>
  <tr>
   <th>First Name</th><th>Last Name</th>...
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Sinead</td><td>O'Connor</td>...
  </tr>
  ...
 </tbody>
</table>

<script type="text/javascript">//<![CDATA[
initable( 'myTable', [ 'rank', null, 'name', 'date', 'time', 'number', null ], 2 );
//]]></script>
...
</body>

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 window.onload event.