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:

Type	Description
`null`	Sorts alphabetically, case insensitive. The default.
`case`	Sorts alphabetically, case sensitive.
`date`	Sorts dates chronologically, expressed in any format recognized by the built-in `Date.parse()` method.
`html`	Sorts by the outerHTML string, including attributes.
`length`	Sorts by the length of the text in the cell, shortest first.
`name`	Sorts alphabetically, disregarding prefixes such as `Van` and `De la`.
`number`	Sorts numerically.
`span`	Sorts by the contents of the first `<span>` element in the cell.
`time`	Sorts 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 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 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.