Table Sorting, Filtering, Etc from JavascriptToolbox.com

doctype [?]

[strict] [loose] [none]

Overview

Examples

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	626.1	Bill	$10.585	2010-12-24
1	397.8	Joe	$89.505	2011-10-17
2	7.8	Bob	$0.084	2012-03-10
3	717.4	Matt	$85.365	2011-09-21
4	804.7	Mark	$91.375	2011-02-03
tbody #2
5	267.9	Tom	$36.255	2013-03-01
6	999.5	Jake	$8.334	2012-09-26
7	586.1	Greg	$13.895	2010-03-31
8	335.5	Adam	$9.864	2012-03-27
9	514.6	Steve	$60.315	2012-07-23
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
Index	Numeric	Text	Currency	Date
0	418.6	Bill	$22.925	2012-11-23
1	716.5	Joe	$62.705	2012-07-24
2	271.1	Bob	$63.475	2012-07-25
3	951.6	Matt	$35.205	2012-02-06
4	483.8	Mark	$15.665	2011-10-29
5	817.5	Tom	$42.455	2012-12-22
6	805.2	Jake	$42.395	2010-01-26
7	658.3	Greg	$1.004	2010-07-06
8	725.1	Adam	$34.555	2010-10-28
9	420.1	Steve	$86.005	2012-09-25

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.43
1	1	Joe	$0.63
2	2	Bob	$0.23
3	3	Matt	$0.23
4	4	Mark	$2.03
5	0	Tom	$1.43
6	1	Jake	$1.83
7	2	Greg	$0.53
8	3	Bill	$0.73
9	4	Joe	$1.43
10	0	Bob	$0.43
11	1	Matt	$1.43
12	2	Mark	$0.73
13	3	Tom	$1.43
14	4	Jake	$1.73
15	0	Greg	$1.93
16	1	Bill	$1.03
17	2	Joe	$0.63
18	3	Bob	$1.73
19	4	Matt	$0.73
20	0	Mark	$1.43
21	1	Tom	$1.83
22	2	Jake	$2.03
23	3	Greg	$1.43
24	4	Bill	$0.13
25	0	Joe	$1.43
26	1	Bob	$0.13
27	2	Matt	$0.63
28	3	Mark	$0.33
29	4	Tom	$1.83
30	0	Jake	$0.23
31	1	Greg	$0.73
32	2	Bill	$0.43
33	3	Joe	$0.43
34	4	Bob	$0.93

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	188.5	Bill	$91.34	2011-03-30
1	454.5	Joe	$25.64	2010-05-05
2	672.1	Bob	$95.04	2011-07-05
3	373.5	Matt	$80.14	2011-04-19
4	892.3	Mark	$7.73	2010-11-10
5	216.3	Tom	$77.64	2010-06-16
6	198.5	Jake	$48.64	2010-07-13
7	905.7	Greg	$54.14	2011-05-24
8	32.9	Adam	$45.64	2011-10-15
9	377.2	Steve	$64.94	2012-06-08

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	2012-09-12
1	Joe	2012-09-08
2	Bob	2012-02-28
3	Matt	2010-09-27
4	Mark	2010-12-17
5	Tom	2012-12-20
6	Jake	2011-01-18
7	Greg	2013-02-02
8	Adam	2012-10-23
9	Steve	2012-07-10
10	George	2011-02-07
11	John	2012-03-07
12	Phil	2010-08-14
13	Jack	2010-10-06
14	Paul	2012-06-04
15	Rob	2011-06-11
16	Walt	2011-06-13
17	Nathan	2011-09-19
18	Dan	2011-11-13
19	Jeff	2012-01-29
20	Bill	2010-02-01
21	Joe	2012-05-13
22	Bob	2011-10-11
23	Matt	2011-10-20
24	Mark	2010-07-22
25	Tom	2011-11-18
26	Jake	2010-01-28
27	Greg	2012-04-22
28	Adam	2013-01-28
<< Previous 1 2 3 4 5 6 Next >>