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
Fred23Male1/4/1973Cool person, really, I like Fred's hair a lot.
Here's an ancillary row of information you may not have known about Fred.
Melissa7Female12/9/1978Big on the cheez whiz.
James12Male3/2/1985Loved and lost, got lost.
Jerome18Male8/8/1967Hits vegas with a vengeance.
Mary33Female2/5/1985Bought 44 .44 automatics and lost them all in the couch.
Susan24Female4/1/1947Bea Arthur thought Susan was the coolest until the pickle incident.
Jerry45Male5/2/1976Signs on the highway pointed Jerry to all the correct exits.
Jim23Male9/3/1684Long since the cricket master.
Samuel14Male3/8/1963Jack and Samuel made some beer, but it tasted bad.
Melissa24Female4/5/2020Taste the ether and you'll go under. Melissa found this out the hard way.
Margaret53Female1/1/1873Point your wings to the west and fly, fly, fly.
Moonbeam43Female3/1/1897Jenny had a vision. Moonbeam was not it.
Sam17Male6/9/1973See note for Samuel. Sam was the taster to discover the truth.
Aaron45Male10/2/1378The Jazz era completely passed Aaron by.
Zachary34Male11/4/1974This boy can jump. Sky. You know?
Zed22Male12/24/1975Of course he's dead. His cricket date went by and he missed it.
Jill68Female2/22/2000Lost in love and I don't know much. But Jill does.
Francess34Female3/19/1991Shortly all will be organized, if Francess has her way.
Jennifer12Female4/13/1967Let's be an honest pair of people about this...who knows what Jennifer was thinking that dark red day?
Daniel51Male8/18/1994Haunting by the closeness of his name to "Danielle", Daniel struggled with his sexuality throughout his life.
Torbjorn6Male4/6/1997Thor's hammer had nothing on the wrath of a Torbjorn enraged.
Thaddeus2Male5/31/1998Quit clowning around and get your work done, boy.
Here's an ancillary row of information you may not have known about Thaddeus!
Joram16Male3/5/1999Van side-swipped a crowd of Bavarian monkeys and yet failed to injure a single one.
Halfdan3Male9/17/2004Belly up to the table and lay down your chips, the time for accounting has come.


<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.


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.


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.