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 s, or on the content/value of a child/descendant element within those s. The various 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.
$(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 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 . 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 , rather than on the 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
| 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 s:
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 . Stipulating this in a suitable regular expression string passed in the regexp parameter allows this.
Click the link in the to see the demo.
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 s are very fixed elements and aren't animatable, the animation is done by some DOM-scripted
These complimentary elements are removed once the animation is complete, leaving you with a legitimate table, each of the 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 by passing a selector string to match that element in a new parameter, child.
So for example, if the 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:
1$('#example1_table').sortTable({
2 onCol: 1,
3 keepRelationships: true,
4 child: 'input'
5});
Important: ensure child matches only one element in each , or the sort will fail. So in the above example, if each contained more than one , the script would be break. To avoid this, be more specific, e.g.
1child: 'input:first-child'
2//or
3child: '#myField'
4//etc
This script
Posted: 08 Jun 2010
Download
Click here to download source (7.3kb)Script type: jQuery plugin
Tags
Changelog
17/07/2010
New parameter added - 'child'. This allows sorting on the content/value of a child element within each TD - just pass the selector text to match the child. Ensure this matches only one element per TD. See notes for more.
Comments (91)
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:
Warren, at 14/02/'12 17:11, said:
Warren, at 14/02/'12 18:29, said:
Mitya, at 14/02/'12 18:43, said:
Snapback Hats, at 10/04/'12 02:45, said:
alifellod, at 24/05/'12 04:32, said:
Fabien Rigaux, at 11/06/'12 14:46, said:
The same script with two more optional parameters : - animationDuration : TD animate duration in milliseconds - callback : function to call after sortTable has been done Example : -------------- "Plugin modifications" : --------------------------- jQuery.fn.sortTable = function(params) { ... animateOn.children('div').animate({top: moveBy_top}, !params.noAnim ? params.animationDuration : 0, null, function() { if ($(this).parent().is('.sortOnThisCol') || !params.keepRelationships) { done++; if (done == valuesToSort.length-1) thiss.tableSort_cleanUp(params.callback); } }); } }; jQuery.fn.tableSort_cleanUp = function(callback) { ... if (typeof(callback) != 'undefined') { callback(); } };james, at 13/06/'12 11:12, said:
anne, at 13/06/'12 11:15, said:
TISA Snapbacks, at 9/07/'12 12:22, said:
Objet publicitaire, at 25/10/'12 04:21, said:
KevinChan, at 15/01/'13 04:18, said:
leo, at 16/01/'13 08:27, said: