table sort

23 October 2006 // javascript. things.

No, your eyes don't deceive you, this is Yet Another Javascript Table Sort script, designed to be unobtrusive, simple and flexible... (skipped 1000 lines of happy talk ;)

download js file

usage

<script src="tablesort.js"></script>

that's all about it. ;)

By default, the script starts automatically at page load and makes all tables in document sortable. To disable autostart, set TableSortNoAutoStart to true before including the script.

As usual, your tables should be divided into THEAD and TBODY, you also need to declare three css classes for table header cells, for example:

/* indicates that the column can be sorted */
td.sortable
    { background:#606060; font-weight: bold; cursor: pointer; }

/* indicates that the column is sorted from low to high */
td.sorted_asc
    { background:#606060 url(up.gif) center right no-repeat; }

/* indicates that the column is sorted from high to low */
td.sorted_desc
    { background:#606060 url(down.gif) center right no-repeat; }

data types

TS can handle different kinds of data in table columns. The built-in sorting rules are

• nocase -- case-insensitive sort (default)
• alpha -- case-sensitive sort
• numeric -- 123 or 123.5 or 1e+3
• natural -- natural sort (like Image column in the table above)
• currency -- currency values like $0,55 or 1,234.56€
• date -- dates (in any format javascript parse can handle)
• usdate -- US dates (mm/dd/yyyy)
• eudate -- German dates (dd.mm.yyyy)

TS is able to detect most data types based on the contents of the first cell in the column.

api

For javascript programmers among us ;) TS provides two public functions: enable() and sort() . The prototype of enable() is as follows

TableSort.enable(table, column, compare)

This turns on sorting of table table on column column using compare as comparison function (well, was it really necessary to say that? Good programs don't need any documentation, do they? ;) Anyways,

• table is either an id or DOM table object
• column is a column number (starting from 1) or title (without any html)
• compare is one of the rules listed above (in quotes) or a pointer to your own comparison function (as in sort)

If an argument is omitted (use '' or null as placeholder when appropriate), TS uses the following defaults:

• if table is omitted, it takes all tables (with THEADs)
• if column is omitted, all columns will be sortable
• if compare is omitted, TS does its best to guess the correct datatype for the column

Examples:

// sort all columns in all tables using default comparison rules
TableSort.enable()

// sort 'Points' (the second) column in the 'people' table
// using default comparison rule
TableSort.enable('people', 'Points')

// same as above
TableSort.enable('people', 2)

// same as above
TableSort.enable(document.getElementsByTagName('TABLE')[0],  2)

// sort 'Created at' using 'human date' comparison
TableSort.enable('people', 'Created at', 'date')

// sort 'Product Number' in all tables using custom comparator
TableSort.enable('', 'Product Number',  MyDomain.compareProductNumbers)

TS handles events (clicks) on its own, it is also possible to call the sorting function from your code. That's what the sort method is for.

TableSort.sort(table, column, compare)

The parameters are as above, but table and column are required.

previous work

This script is based on the works of Paul Sowden and Stuart Langridge. There is also a plenty of similar scripts already written...