Table Sorter

Site Navigation 

The desire to sort the rows in a table based on the contents of the cells in a column, by clicking on the column header, is common. It is also a task that can be done by server-side scripts, but the work of the server can be reduced by doing the sorting on the client when the client browser can and then falling back to the server when the client browser cannot sort the table. This script was designed for use with a server-side table sorting script. It is triggered with the onclick events of links in the table headers, cancelling navigation if the browser will support the client-side sort, or falling back on the navigation to pass the task on to the server script.

Speed of execution was an important consideration in the design and is mostly achieved by never repeating any task. As a result the first click on a column will take longer to sort the table than any subsequent click, as the second does not need to work out the order in which to show the rows, it just need to re-order the DOM to reflect the desired order.

The contents of the following test table are generated with JavaScript to save download time .

Case Insensitive Case Sensitive Number Date
EGrYBUhdaTTIw001/06/88
aatNnUBmDADXLN103/09/97
PSJeswNDYzMZPuxXm205/25/77
FTqiPwLLWSONn311/30/71
hZEAZtphpmRhtNb409/23/89
oiCarpcQvLCtLJyl503/24/73
CuqxeRymPEaDpH607/16/76
WHeZHYAUIMyBtapZx712/20/71
qRhjXvQUFoxW811/03/70
hnrrurpOtnYTwJsxcuG912/01/93
iuIiLfRXdmxFRrazNxO1005/15/81
DYgecTXMqzyGtsxY1111/25/93
PaOijIQhUiqYTGez1203/05/85
fOSyWUrAsnZF1310/13/71
tCQIMIVUlhBDvJh1404/28/79
rsXYcNvQvoBGajXXTZOtE1509/24/81
zZVezsmnQUCtJ1607/29/86
AnJWVHPLoSB1701/15/97
hqGUescwqUjHH1810/05/81
ybJHXhVsFqPuD1905/13/87
© Richard Cornford 2004