Animated table sort (REGEXP friendly)
Note: this script is currently unsupported. You are free to use it, but, due to its complexity, there are some bugs. Some people report it working fine, others (with large tables, especially), have issues.
Overview
This plugin allows you to animatedly sort a table based on a column's
Usage & parameters
Call tableSort(params) on a table returned by a jQuery selector.
$(selector).tableSort(params);
...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
regexp (RegExp, default: null) - a string representing a regular expression (/pattern/) to sort on instead of the complete contents of the
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
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
| Place | County | Phone code | Approx. population |
|---|---|---|---|
| Nottingham | Nottinghamshire | 0115 | 292400 |
| Luton | Bedfordshire | 01582 | 203800 |
| Huddersfield | Yorkshire | 01484 | 146234 |
| Carlisle | Cumbria | 01228 | 103700 |
| Brighton | East Sussex | 01273 | 155919 |
| Woking | Surrey | 01483 | 62796 |
| Basingstoke | Hampshire | 01256 | 82913 |
| Rhyll | Clwyd | 01745 | 24889 |
Here's the code applied to the links in the
1//column 1 - by place name
2$('#example1_table').sortTable({
3 onCol: 1,
4 keepRelationships: true
5});
6//column 2 - by county
7$('#example1_table').sortTable({
8 onCol: 2,
9 keepRelationships: true
10});
11//column 3 - by phone code
12$('#example1_table').sortTable({
13 onCol: 3,
14 keepRelationships: true,
15 sortType: 'numeric'
16});
17//column 4 - by approx. population
18$('#example1_table').sortTable({
19 onCol: 4,
20 keepRelationships: true,
21 sortType: 'numeric'
22});
Example 2 - REGEXP
To illustrate better how the regular expression parameters can be useful, consider the following example.
| Product category |
|---|
| Playstation 3 games (164) |
| XBox 360 games (94) |
| Nintendo Wii games (142) |
| Nintendo DS games (89) |
| PC games (221) |
| Apple Mac games (18) |
This simple table shows a number of product categories and, for each, the number of products in each one.
Here, we want to sort on the number of products, not on the whole contents of each
Click the link in the
Here's the code behind this example:
1$('#example1_table').sortTable({
2 onCol: 1,
3 sortType: 'numeric',
4 sortDesc: true,
5 regexp: /\((\d+)\)/, //match just the number of products
6 regexpIndex: 1, //sort on just the number, not brackets too
7 keepRelationships: true
8});
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
These complimentary elements are removed once the animation is complete, leaving you with a legitimate table, each of the
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
So for example, if the
1$('#example1_table').sortTable({
2 onCol: 1,
3 keepRelationships: true,
4 child: 'input'
5});
Important: ensure child matches only one element in each
1child: 'input:first-child'
2//or
3child: '#myField'
4//etc
Comments (87)
Alex, at 17/09/'10 23:13, said:
Frank, at 20/09/'10 11:38, said:
Mitya, at 20/09/'10 12:30, said:
Frank, at 22/09/'10 12:12, said:
Mitya, at 22/09/'10 15:09, said:
Frank, at 24/09/'10 06:48, said:
Mitya, at 24/09/'10 09:55, said:
Frank, at 24/09/'10 11:46, said:
Nick, at 29/09/'10 10:58, said:
Mitya, at 29/09/'10 11:05, said:
Divyesh , at 29/09/'10 20:14, said:
Agence Index Web Marketing - Montreal, at 2/10/'10 07:42, said:
Jonathan, at 13/10/'10 04:26, said:
Jonathan, at 13/10/'10 04:26, said:
Jonathan, at 13/10/'10 06:34, said:
Henrik, at 18/10/'10 08:10, said: