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

607

Bill

$73.995

2018-12-04

1

856.4

Joe

$8.654

2017-08-18

2

935

Bob

$38.365

2020-04-19

3

984

Matt

$90.395

2019-03-08

4

508.1

Mark

$76.725

2019-05-10

tbody #2

5

73.8

Tom

$6.774

2019-12-04

6

541.1

Jake

$36.635

2020-04-01

7

18.1

Greg

$6.664

2017-11-12

8

188.2

Adam

$95.265

2020-05-16

9

136.2

Steve

$91.115

2020-07-13

tfoot

tfoot

tfoot

tfoot

tfoot

tfoot

Client-Side Sorting With Large Table

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

113.6

Bill

$51.815

2019-09-16

1

537.8

Joe

$37.445

2019-12-25

2

554.2

Bob

$30.945

2018-01-11

3

412.9

Matt

$29.335

2017-09-22

4

918.5

Mark

$80.145

2020-02-26

5

478.7

Tom

$87.515

2020-05-15

6

219

Jake

$41.625

2018-05-12

7

61.8

Greg

$43.425

2018-07-28

8

152.3

Adam

$62.245

2018-06-03

9

33.9

Steve

$75.855

2018-02-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

$1.93

1

1

Joe

$1.83

2

2

Bob

$1.43

3

3

Matt

$1.33

4

4

Mark

$0.83

5

0

Tom

$0.13

6

1

Jake

$0.83

7

2

Greg

$1.93

8

3

Bill

$0.83

9

4

Joe

$1.13

10

0

Bob

$0.83

11

1

Matt

$1.43

12

2

Mark

$1.23

13

3

Tom

$0.63

14

4

Jake

$0.93

15

0

Greg

$0.83

16

1

Bill

$1.63

17

2

Joe

$0.73

18

3

Bob

$0.63

19

4

Matt

$2.03

20

0

Mark

$1.53

21

1

Tom

$1.13

22

2

Jake

$0.13

23

3

Greg

$0.43

24

4

Bill

$1.73

25

0

Joe

$0.43

26

1

Bob

$1.63

27

2

Matt

$0.23

28

3

Mark

$0.53

29

4

Tom

$1.23

30

0

Jake

$0.63

31

1

Greg

$0.43

32

2

Bill

$0.93

33

3

Joe

$2.03

34

4

Bob

$1.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

861.1

Bill

$4.63

2018-05-05

1

825

Joe

$42.54

2020-01-19

2

201.7

Bob

$9.73

2018-09-24

3

496.8

Matt

$57.04

2019-12-28

4

270.5

Mark

$91.84

2017-09-13

5

263.3

Tom

$68.34

2019-05-13

6

317.8

Jake

$88.24

2018-11-07

7

524.5

Greg

$70.24

2019-03-07

8

765.1

Adam

$28.24

2020-01-26

9

971.7

Steve

$73.34

2019-12-30

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.