2003-01-10: First public version released
2004-01-27: Version 1.1 - Simplified adding custom sort types
2006-05-26: Changed license to Apache Software License 2.0.
In 1998 we released a script that allowed any HTML table element to be sorted using DOM level 1. Now that this script has played its part it is time to realize that there were a few things that could greatly improve this script.
There were mainly two goals that I wanted to achieve with the new version. The first one was to make a more consistent API. The old script wasn't were modular and the only way to sort the table was to actually click on the header cell. The new version should allow sort to be called from any script anywhere. The second most important part was performance. The new version is about 10 times faster. This was acheived by doing as little DOM interaction as possible in the actual sorting.
The usage has changed a little since the first version. Now a JavaScript object is constructed. The constructor takes the table element that it should make sortable and an array of the sort types. This array is optional and if left out all columns are sorted using case sensitive string comparison.
The format of the table is the same as in the previous version. The table
must consist of a thead and a tbody element. Note
alse that cells with rowspan and colspan will break
the sort behavior since then the correct cells cannot be found. If you really
do not want a visible header you can hide the thead by setting the
display style to "none".
<table class="sort-table" id="table-1" cellspacing="0">
<thead>
<tr>
<td>String</td>
<td>Number</td>
...
</tr>
</thead>
<tbody>
<tr>
<td>apple</td>
<td>45</td>
...
</tr>
...
</tbody>
</table>
<script type="text/javascript">
var st1 = new SortableTable(document.getElementById("table-1"));
</script>
And to use different types for the columns.
var st2 = new SortableTable(document.getElementById("table-2"),
["String", "CaseInsensitiveString", "Number", "Date", "None"]);
To sort the table the user can click on the table header cells. Sometimes it is also desired to allow the table to be sorted without the user interaction. For example, one might want to sort the table when the page has loaded.
The table can be sorted by calling the method sort on the SortableTable
object. This method takes 3 argument but only the first one is required. The
first argument is the column number to sort by. The second argument is used to
tell whether to sort descending or ascending. If left out then this is toggled
so that the column will be sorted descending and ascending every other time
respectively. The last argument can be used to set the sort type. If this is
left out the sort type set in the constructor is used.
st1.sort(0); st1.sort(0, true); st1.sort(1, true, "Number");
There are 4 built in supported sort types. These are:
| Type | Description |
String |
The default sort type. Sorts the text of the cells using a case sensitive string comparison. |
CaseInsensitiveString |
Sorts the text of the cells using a case insensitive string comparison. |
Number |
Converts the text of the cells to numbers and then the sort compares the numbers. |
Date |
Uses the ISO date format to sort the column. Converts the text of the
cells to Date objects and then the sort compares these
dates. |