frequency decoder ~ Unobtrusive Table Sort Script

The original (server-side) solution

Update: This script has been superceded by the latest version, the Unobtrusive Table Sort Script revisited and while still available for download, is no longer being actively supported.

Thanks to everyone who chipped in with bug reports and helpfull suggestions. There’s a pint of Guinness in the virtual keg for all of you.

I’m currently in the process of rewriting a web-application that displays lots of tabular data. The previous application enabled users to sort the table rows by clicking on the table header text but unfortunately, passed the processing overhead back to the server, meaning the entire page was reloaded on each click… nasty.

The original applications table rows were “zebra striped” (again, this was originally handled by the server code), which means that a JavaScript solution has to also keep the order of the stripes after sorting & rearranging the table rows.

The JavaScript solution

This is a perfect example of where a little bit of JavaScript progressive enhancement can work wonders. The idea then was to write a script with identical functionality to the current system i.e. a script that can sort the table rows and then correctly “zebra-stripe” the rows after the sort without reloading the page.

Sortable datatypes

The script can currently sort dates (dd-mm-yyyy, mm-dd-yyyy or yyyy-mm-dd formats accepted), currency values ($, £ and €), numbers/floats and finally, plain-text (sorted in a case-insensitive manner). Additionally, the character used as the date divider (i.e. the character that separates the date parts) can be “/”, “-”, “.” or “ “ (space).

Zebra striping the table rows

Should the table be given a className of style-something, each alternate table row is given the className something after the table has been sorted i.e giving the table a className of style-alternate will tell the script to give each alternate row the className alternate.

Making any column sortable

To make any table column sortable, just give the associated table header (th) tag a className of sortable, the script will automatically determine the columns datatype, make the entire table header clickable (and not just the text contained within) and create the appropriate up/down arrow within the header when clicked (using the ↑ & ↓ characters).

Forcing a columns sort algorithm

Should a column contain a mix of datatypes (as shown in the demo’s second table), it is advised that you explicitly set the sort algorithm by adding one of the following classNames to the associated table header (th) tag: sortable-numeric, sortable-currency or sortable-date.

Stipulating custom sort functions

Should you wish to stipulate your own custom sort function, add the className sortable-yourCustomFunctionName to the table header (th) tag; for example, adding a className of sortable-myCustomSortFunction will tell the script to call a JavaScript function named myCustomSortFunction.

Additionally, the name of your custom function may only contain letters (a-Z) and the underscore character. Function names containing other characters will not be recognised by the script. The function name has been limited in this way as it is defined within a className, which itself can only contain a subset of the full ASCII character set i.e. while “$” is a valid JavaScript function name, it is not a valid character to use within a className).

Available custom sort functions

A few custom sort functions have been written and made available for those who might need them. They currently include:

A function to sort by IP address
A function to sort English longhand date formats e.g. 12th April 2006
A function to sort twelve-hour timestamps e.g. 12:32a.m.
A function to sort numbers stipulated in Scientific Notation e.g. -32.45 e 0.32
A function to sort percentages (positive or negative, floats or integers)

The functions can now be seen in action on their own custom function demo page.

Sorting the table automatically

As it seems to be a common request, I’ve altered the script to automatically sort any table that has been given the className sortable-onload. Tables with this className are sorted immediately after the window.onload event fires.

Should you wish to specify the column to use, give the table a className of sortable-onload-N; where N specifies an integer that defines the column to use e.g. giving the table a className of sortable-onload-3 will initiate the automatic sort using the third sortable column located by the script.

Indicating the sort is underway

Very large tables may take a while to sort which, without some sort of feedback, may leave users slightly bewildered as to why nothing seems to be happening after they have just clicked a table header.

To enable you to provide this feedback, the TH node clicked by the user is temporarily assigned the className sort-active. This enables you to create appropriate styles that visually indicate to the user that the sort is underway (adding an animated gif to the background of the TH node for example). Also, during the sort process, the mouse cursor is changed to the “hourglass”. Of course, after the sort is complete, the className sort-active is removed from the TH node and the cursor returns to it’s normal state.

Using images for the arrows

As it’s a mighty popular request, I’ve updated the script to enable images to be used in place of the arrows. The images should be defined within your CSS as follows:

      
  th span
        {
        display:none;
        } 
  th.forwardSort
        {
        background:transparent url(your-down-arrow-image) no-repeat 100% 0;
        }
  th.reverseSort
        {
        background:transparent url(your-up-arrow-image) no-repeat 100% 0;
        }

As can be seen, you should make sure the span (which is always created by the script) is removed from the document by setting it to display:none. You are then free to style the TH node as you wish.

If you are already using background images to style the TH nodes, it is then necessary to add the class no-arrow to the table’s className (which instructs the script to add non-breaking spaces to the span element and not the “arrow” character) and move the styling of the arrows into the span element as is shown below:

      
  th span
        {
        display:inline;
        width:2em;
        height:1em;
        }
  th.forwardSort span
        {        
        background:transparent url(your-down-arrow-image) no-repeat 50% 50%;
        }
  th.reverseSort span
        {
        background:transparent url(your-up-arrow-image) no-repeat 50% 50%;
        }

Keyboard Accessibility

The script is now keyboard accessible and (thanks to Pat), has been tested using the screen-reader Jaws.

Demo, downloads and updates

Tested in Internet Explorer 6, Opera 8.5, Mozilla and Firefox.

View the table-sort demo, the custom function demo or download the source code.

14/02/2006 :

Added the ‘sort onload’ functionality.
Integrated John Resigs addEvent function.

15/02/2006 :

Added the ability to ‘force’ the script to use a specified sort algorithm.
Added a check for identical cell data (no sort is ran should all of a columns cells contain identical data).

08/03/2006 :

Added the ability to specify which column the table is initially sorted on.

15/03/2006 :

Added the className “sort-active” to the TH node and changed the cursor to “wait” during the sort process.
Integrated the addEvent function into the fdTableSort object.

16/03/2006 :

Added the ability to specify a custom sort function.

27/03/2006 :

Added an innerText cache for tables with “cache-results” defined within the className.

30/03/2006 :

Made the script keyboard accessible.

Tags: javascript, sort, table, unobtrusive

Previous Comments ~

Ice Kapom

#1 · Monday December 26, 2005

I don’t undersatnd a f*** word !

Unobtrusive Table Sort Script

A script that sorts table rows containing date, numeric or plain-text data and then politely re-colours alternate rows