jQuery SorTable Library v0.10 2013-Jun-29

Supply any <table> with class class="sortable", include the JS libraries jQuery and jquery.sortable.js, and place class="sort-…" (see below) 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. This even works for tables added to the document after load (e.g. via AJAX).

In Action

Name	Age	Sex	SomeDate	Notes
Total People: 24
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.

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 sort- class (see below) before anything will happen.
<th class="sort-...">: This attribute is required to make the column sortable. Possible values are sort-text, sort-number, or sort-date.
<table ... class="sortable sort-tbodies">: (optional) Instead of sorting the <tr> in a single tbody, sort the tbody themselves based on the first row in each. (See also sort-withprevious below.)
<th class="sort-descending">: (optional) Specifies that the initial 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 class="sort-default">: (optional) Does an initial sort on the specified column, both ensuring the data is sorted and also providing the visual indication of the sorting.
<tbody class="sort-tbody">: (optional) If your table has multiple tbody tags, use this class to specify the tbody you wish to sort. If omitted, the first tbody (table.tBodies[0]) will be used.
<tr ... class="sort-withprevious">: (optional) If there are rows which are associated and should be sorted as a group, put this class 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. (See also sort-tbodies above.)
<td ... sortvalue="...">: (optional) If you wish to sort by a value for a table cell other than what is displayed in the cell, you may use this (syntactically invalid) attribute to sort by.

Notes

Applied Classes

Every <th> which has a sort-... class will automatically have a class of "sorthead" assigned to it. (Allows you to use CSS to style those sort heads differently from the rest.)

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), as well as either the class "sorted-ascending" or "sorted-descending". If you want to place a sort indicator on your column header, use CSS like so:

table.sortable th.sorted:after            { color:#999 }
table.sortable th.sorted-ascending:after  { content:' ▲' }
table.sortable th.sorted-descending:after { content:' ▼' }

Click Twice to Reverse Sort

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

sort-date compare method.

When using sort-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 the custom sortvalue="..." attribute of the TD.

ToDo

FEATURE:Custom value functions: Provide a JS-only mechanism to supply a callback at the table or column level that will be used to retrieve a value, given a row#/column#/tr/td set of info.

FEATURE:Multiple Sort Columns: Add shift-click to sort by additional secondary/tertiary columns. However, stable sort algorithms will already allow you to sort first by one column and then by a second.