Table Sort JS Library v1.5.4 2003-Aug-1

Supply any <table> with class class="sortable", include the JS library files tablesort.js and virtualpointer.class.js, and place the attribute compareMethod="..." on the desired <th>, and the user will be able to click on the column headers for your table and have the rows sort, client side. NS6+, IE5+ compatible

In Action

Name	Age	Sex	SomeDate	Notes
Fred	23	Male	1/4/1973	Cool person, really, I like Fred's hair a lot.
	Here's an ancillary row of information you may not have known about Fred.
Melissa	7	Female	12/9/1978	Big on the cheez whiz.
James	12	Male	3/2/1985	Loved and lost, got lost.
Jerome	18	Male	8/8/1967	Hits vegas with a vengeance.
Mary	33	Female	2/5/1985	Bought 44 .44 automatics and lost them all in the couch.
Susan	24	Female	4/1/1947	Bea Arthur thought Susan was the coolest until the pickle incident.
Jerry	45	Male	5/2/1976	Signs on the highway pointed Jerry to all the correct exits.
Jim	23	Male	9/3/1684	Long since the cricket master.
Samuel	14	Male	3/8/1963	Jack and Samuel made some beer, but it tasted bad.
Melissa	24	Female	4/5/2020	Taste the ether and you'll go under. Melissa found this out the hard way.
Margaret	53	Female	1/1/1873	Point your wings to the west and fly, fly, fly.
Moonbeam	43	Female	3/1/1897	Jenny had a vision. Moonbeam was not it.
Sam	17	Male	6/9/1973	See note for Samuel. Sam was the taster to discover the truth.
Aaron	45	Male	10/2/1378	The Jazz era completely passed Aaron by.
Zachary	34	Male	11/4/1974	This boy can jump. Sky. You know?
Zed	22	Male	12/24/1975	Of course he's dead. His cricket date went by and he missed it.
Jill	68	Female	2/22/2000	Lost in love and I don't know much. But Jill does.
Francess	34	Female	3/19/1991	Shortly all will be organized, if Francess has her way.
Jennifer	12	Female	4/13/1967	Let's be an honest pair of people about this...who knows what Jennifer was thinking that dark red day?
Daniel	51	Male	8/18/1994	Haunting by the closeness of his name to "Danielle", Daniel struggled with his sexuality throughout his life.
Torbjorn	6	Male	4/6/1997	Thor's hammer had nothing on the wrath of a Torbjorn enraged.
Thaddeus	2	Male	5/31/1998	Quit clowning around and get your work done, boy.
	Here's an ancillary row of information you may not have known about Thaddeus!
Joram	16	Male	3/5/1999	Van side-swipped a crowd of Bavarian monkeys and yet failed to injure a single one.
Halfdan	3	Male	9/17/2004	Belly up to the table and lay down your chips, the time for accounting has come.
Total People: 24

Project	Meeting Time
ignore this line and this tbody

Features/Docs

<table ... class="sortable">

This class is required to enable the table to be sortable. Note that the individual th's must also specify a compareMethod (see below) before anything will happen.

<th compareMethod="...">

This attribute is required to make the column sortable. Possible values are text/textual, number/numeric, date, or time.

<table showSortDirection="true">

(optional) Places 5 or 6 at the end of the currently-sorted column header to indicate short direction. IE5Mac has problems with this

<th sortDescending="true">

(optional) Specifies that the intial sort for a column should be in descending rather than ascending order. (Clicking a second time on any sorted column will always switch the sorting method.)

<th defaultSort="true">

(optional) Does an initial sort on the specified column, both ensuring the data is sorted and also (if showSortDirection is on) providing the visual indication of the sorting.

<table ... sortBody="...">

(optional) If your table has multiple tbody tags, use this attribute to specify the id of the tbody you wish to sort. If ommitted, the first tbody (table.tBodies[0]) will be used.

<tr ... ischild="true">

(optional) If there are rows which are associated and should be sorted as a group, put ischild="true" on all <tr> after the first. The group will be sorted according to criteria from the first row, and the child rows will always be kept with the parent.

<table ... getValueFunction="...">

(optional) By default the sort function will compare the innerText of each <td> when deciding how to sort the rows. If you need another way to sort the rows (e.g. a form input, as above, or a custom attribute for the td) then you may supply the name of your own function for retrieving the value. This function will be passed two parameters, [a reference to the table row, and the number of the column being sorted] and should return the value for that row/column pair.

function GetValueFunction_template(tr,colNum){
	return tr.childNodes[colNum].childNodes[0].nodeValue;
}

Notes

Applied Classes

Every <th> which has a compareMethod will automatically have a class of "sorthead" assigned to it. (Allows you to use CSS to style those sort heads differently from the rest.) It will also have the 'hand' cursor style applied.
When a <th> is the active sort column, it will have an additional class of "sorted" applied to it (again, allowing you to style the active th differently, e.g. making it bold or not look like a link).

Click Twice to Reverse Sort

Clicking on the <th> for a column which has already been sorted will reverse the sort direction.

date and time compare methods.

When using compareMethod="date", the library calls the JS new Date() function on the value, so oddly-formatted dates may turn into NaN (which is then treated like 0). If you must have a particular date format which does not work, I suggest placing a standard mm/dd/yyyy format as a custom attribute of the TD and then supplying your own getValueFunction such as:

<td sortValue="12/31/2002">Dec-31</td>
...
function GetTDSortValue(tr,colNum){
	return tr.childNodes[colNum].getAttribute('sortValue');
}

Note that since the same function is used for all columns, you will need to use that same custom attribute in every column that you want sortable.

When using compareMethod="time", the library splits the retrieved value around colons (:), and if "pm" exists in the string it will add 12 to the first number. So 1:12am is valid, as is 60:80:23:32

ToDo

FEATURE:Allow Custom getValueFunction per column: Allow individual <th> to have their own getValueFunction, so that columns with a funky value can have custom attributes but standard columns can use the default function.

BUG:IE5Mac & showSortDirection: The rendering engine in IE5Mac has problems with showSortDirection. If the waning IEMac population is important to you, avoid using this attribute.

FEATURE:Multiple Sort Columns: Not sure what the UI would be for it (shift-click to provide backup, use previously sorted column as backup?), but allow sorting by a primary and then secondary column. (Comparison function calls itself again in the 0 case.) Low-priority.