Licensed under the Apache Software License 2.0

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.

Introduction

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.

Usage

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"]);

Sorting the table

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");

Sort Types

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.

Sortable Table
Implementation
API
Demos
Download

Author: Erik Arvidsson