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:

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.