Logo
doctype [?]
[strict] [loose] [none]

Table Sorting, Filtering, Etc - BETA!


Client-Side Table Sorting Basic Example

Click on column headers to sort by the column. Sorting is done within the two tbody sections, not across them, and the header and footer are not changed. The table is auto-striped and auto-sorted on the first column on page load.

Index Numeric Text Currency Date Checkbox
tbody #1
0 808.5 Bill $59.395 2018-05-18
1 405.6 Joe $81.825 2016-12-29
2 315.4 Bob $22.215 2018-06-15
3 779.1 Matt $83.645 2017-08-14
4 445.2 Mark $39.315 2016-12-27
tbody #2
5 128.4 Tom $89.115 2015-10-12
6 387.9 Jake $91.155 2015-10-31
7 272.6 Greg $71.255 2016-03-07
8 19.6 Adam $34.545 2016-09-12
9 452.3 Steve $20.605 2017-08-10
tfoot tfoot tfoot tfoot tfoot tfoot

Client-Side Sorting With Large Table

See the Client-Side Sorting With 500 Rows example to see how fast it sorts on your computer.

Rowspan/Colspan Correction

When cells span rows or columns, their cellIndex property is misleading. A cell may be the first td in a row, but actually occupy the second position in the table "grid" because a cell in a row above it has a rowspan > 1. Since the column to sort is calculated automatically based on the cell clicked, the correct column index must be computed rather than relying blindly on the cellIndex property of the clicked cell. The example below demonstrates this complex requirement.
Also, it shows that only classes that are marked as "sortable" will receive the sorted class names. This is important, because you don't want every header cell that is in the same column as the sorted column to be marked as sorted - only the ones you specify.

Rowspan/Colspan Correction
Index First Two Columns Second Two Columns
Numeric Text Currency Date
0 179.9 Bill $1.444 2016-04-26
1 112.1 Joe $41.995 2015-09-29
2 608.5 Bob $73.525 2016-06-12
3 565.5 Matt $51.425 2015-12-05
4 259.1 Mark $95.945 2017-03-04
5 753.3 Tom $8.774 2016-10-29
6 865.6 Jake $47.565 2016-07-19
7 994.3 Greg $74.825 2015-08-21
8 234.3 Adam $76.775 2016-09-24
9 637.4 Steve $22.005 2017-05-20

Client-Side Table Filtering

Client-side table filtering works by scanning each row in the table and matching it against the criteria passed into the filter. Filter values are stored, so adding or removing another filter maintains any other filters that still apply.
The filters in this example were created manually, not using the auto-filter functionality. The first filter is a manually-create select list, the second is a text input for entering free-form text, and the third uses custom functions to do the filtering.

Table Filtering
Index Number Name Amount
Filter:
0 0 Bill $0.73
1 1 Joe $0.83
2 2 Bob $1.33
3 3 Matt $1.23
4 4 Mark $1.03
5 0 Tom $0.13
6 1 Jake $1.43
7 2 Greg $0.23
8 3 Bill $1.63
9 4 Joe $0.13
10 0 Bob $1.43
11 1 Matt $0.63
12 2 Mark $0.43
13 3 Tom $1.93
14 4 Jake $0.53
15 0 Greg $1.53
16 1 Bill $1.43
17 2 Joe $0.73
18 3 Bob $0.43
19 4 Matt $1.13
20 0 Mark $1.73
21 1 Tom $1.13
22 2 Jake $1.13
23 3 Greg $1.13
24 4 Bill $1.23
25 0 Joe $1.63
26 1 Bob $0.73
27 2 Matt $0.13
28 3 Mark $0.93
29 4 Tom $1.13
30 0 Jake $1.33
31 1 Greg $1.53
32 2 Bill $1.93
33 3 Joe $0.63
34 4 Bob $0.73

Table Striping

If a table has alternate rows highlighted and it is sorted, filtered, or otherwise manipulated, the sorted row colors can be mixed up. This function simply re-stripes rows by applying a class name to each odd row and removing it from each even row.

Table Striping
(Click here to shade alternate rows in this table)
Index Numeric Text Currency Date
0 472.5 Bill $33.34 2015-09-01
1 592.8 Joe $12.14 2015-10-11
2 278.5 Bob $42.34 2016-05-23
3 223.2 Matt $68.54 2015-08-04
4 921.2 Mark $3.53 2016-03-12
5 484.7 Tom $86.04 2017-12-04
6 42.5 Jake $43.34 2016-09-14
7 834.5 Greg $77.44 2016-10-15
8 263.9 Adam $33.54 2015-09-01
9 20 Steve $29.64 2016-07-21

Client-Side Table Paging

Although paging through results or records is usually done by making a trip back to the server, it can sometimes be helpful to page through results on the client side.

Index Name Date
0 Bill 2016-08-23
1 Joe 2017-11-08
2 Bob 2017-08-09
3 Matt 2016-11-21
4 Mark 2016-07-25
5 Tom 2017-12-27
6 Jake 2017-03-30
7 Greg 2017-06-12
8 Adam 2016-02-29
9 Steve 2018-03-19
10 George 2018-02-26
11 John 2018-05-02
12 Phil 2018-05-20
13 Jack 2017-11-26
14 Paul 2018-06-11
15 Rob 2015-12-27
16 Walt 2016-04-09
17 Nathan 2017-12-31
18 Dan 2018-06-29
19 Jeff 2016-05-28
20 Bill 2016-03-15
21 Joe 2016-08-08
22 Bob 2015-11-18
23 Matt 2015-06-27
24 Mark 2017-12-21
25 Tom 2016-09-19
26 Jake 2016-07-19
27 Greg 2018-03-20
28 Adam 2016-10-12
<< Previous 1 2 3 4 5 6 Next >>

Alternate Styles Examples

This example shows how simply changing your css can change the sort interface without any code changes necessary.
Click on an icon set to try it on.

Browse icon files for download...

Index Numeric Text Currency Date
0 650.8 Bill $23.94 2018-01-02
1 418.8 Joe $92.84 2016-04-20
2 779.4 Bob $73.84 2018-02-14
3 418.5 Matt $97.14 2017-09-30
4 280.8 Mark $89.04 2017-07-15