Animated table sort (REGEXP friendly)

• » Overview
• » Usage & parameters
• » Example 1
• » Example 2 - REGEXP
• » Notes

Overview

This plugin allows you to animatedly sort a table based on a column's <td>s, or on the content/value of a child/descendant element within those <td>s. The various <td>s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches. You can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.

Usage & parameters

Call tableSort(params) on a table returned by a jQuery selector.

...where params is an object of property/value pairings, including:

onCol (int, required) - the index of the column in your table to sort on (not zero-indexed)

keepRelationships (bool, default: false) - if true, row relationships wil be maintained. That is, the sibling <td>s will move also

regexp (RegExp, default: null) - a string representing a regular expression (/pattern/) to sort on instead of the complete contents of the <td>. Useful with regexpIndex - see below.

regexpIndex (int, default: 0) - if sorting on a regular expression, this is the index of the returned array of matches to use for the sort, should it return more than one match. See below for an example of this, where a regexp sub-pattern is used.

child (string) - sort on the content/value of a child/descendant element within each <td>, rather than on the <td>s themselves. This should be a selector string to match that element. See notes for more info.

sortType (string, default: ascii) - either 'ascii' or, if wanting to sort numerically, 'numeric'

sortDesc (bool, default: false) - if true, the sort will be done in descending order, not ascending

Example 1

Click the column headings to sort the table based on that column

Here's the code applied to the links in the <th>s:

Example 2 - REGEXP

To illustrate better how the regular expression parameters can be useful, consider the following example.

Here's the code behind this example:

Note we specify regexpIndex as 1 because we our regexp pattern returns an array of matches containing two elements, and we want to sort on the number in isolation, i.e. the sub-pattern, not on the surrounding brackets as well.

If this is Greek to you, click here for more information on Javascript regular expressions.

Notes

DOM

Since <td>s are very fixed elements and aren't animatable, the animation is done by some DOM-scripted <div>s, which animate to their new homes then repopulate their new <td> homes.

These complimentary elements are removed once the animation is complete, leaving you with a legitimate table, each of the <td>s of which genuinely contain the content they appear to. This means you can perform further traversal or manipulation on the table without issue.

UPDATE - 17/07/2010: sort on child element

Following a request, you can now sort on the content/value of a child/descendant element within each <td> by passing a selector string to match that element in a new parameter, child.

So for example, if the <td>s in column one each contained a text field, and you wanted to sort the table on the current values in those fields, you could run the following:

Important: ensure child matches only one element in each <td>, or the sort will fail. So in the above example, if each <td> contained more than one <input>, the script would be break. To avoid this, be more specific, e.g.