This component may be obtained, modified and distributed free of charge for personal as well as commercial use. Please see the license for the complete terms and exact wording.
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 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
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
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
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:
||The default sort type. Sorts the text of the cells using a case sensitive string comparison.|
||Sorts the text of the cells using a case insensitive string comparison.|
||Converts the text of the cells to numbers and then the sort compares the numbers.|
||Uses the ISO date format to sort the column. Converts the text of the