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 | 702.5 | Bill | $48.235 | 2015-02-23 | |
| 1 | 874.9 | Joe | $92.305 | 2013-06-22 | |
| 2 | 45.7 | Bob | $51.315 | 2012-06-16 | |
| 3 | 622.7 | Matt | $66.655 | 2012-11-14 | |
| 4 | 16.6 | Mark | $71.255 | 2015-01-02 | |
| tbody #2 | |||||
| 5 | 113.1 | Tom | $92.015 | 2015-01-21 | |
| 6 | 34 | Jake | $43.895 | 2012-04-11 | |
| 7 | 30.1 | Greg | $2.644 | 2012-12-25 | |
| 8 | 341.7 | Adam | $14.125 | 2013-10-18 | |
| 9 | 628.1 | Steve | $20.535 | 2012-08-14 | |
| tfoot | tfoot | tfoot | tfoot | tfoot | tfoot |
See the Client-Side Sorting With 500 Rows example to see how fast it sorts on your computer.
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.03 |
| 1 | 1 | Joe | $1.63 |
| 2 | 2 | Bob | $0.23 |
| 3 | 3 | Matt | $1.33 |
| 4 | 4 | Mark | $1.93 |
| 5 | 0 | Tom | $1.83 |
| 6 | 1 | Jake | $0.53 |
| 7 | 2 | Greg | $1.23 |
| 8 | 3 | Bill | $1.53 |
| 9 | 4 | Joe | $0.73 |
| 10 | 0 | Bob | $0.73 |
| 11 | 1 | Matt | $0.43 |
| 12 | 2 | Mark | $0.23 |
| 13 | 3 | Tom | $0.73 |
| 14 | 4 | Jake | $1.33 |
| 15 | 0 | Greg | $1.23 |
| 16 | 1 | Bill | $0.63 |
| 17 | 2 | Joe | $0.53 |
| 18 | 3 | Bob | $2.03 |
| 19 | 4 | Matt | $0.33 |
| 20 | 0 | Mark | $1.73 |
| 21 | 1 | Tom | $1.73 |
| 22 | 2 | Jake | $0.33 |
| 23 | 3 | Greg | $1.03 |
| 24 | 4 | Bill | $1.43 |
| 25 | 0 | Joe | $0.83 |
| 26 | 1 | Bob | $0.93 |
| 27 | 2 | Matt | $1.43 |
| 28 | 3 | Mark | $0.43 |
| 29 | 4 | Tom | $0.23 |
| 30 | 0 | Jake | $1.83 |
| 31 | 1 | Greg | $0.53 |
| 32 | 2 | Bill | $1.83 |
| 33 | 3 | Joe | $0.13 |
| 34 | 4 | Bob | $1.83 |
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 | 2013-04-23 |
| 1 | Joe | 2013-02-26 |
| 2 | Bob | 2013-03-06 |
| 3 | Matt | 2013-09-30 |
| 4 | Mark | 2014-07-08 |
| 5 | Tom | 2012-02-17 |
| 6 | Jake | 2012-02-19 |
| 7 | Greg | 2013-09-27 |
| 8 | Adam | 2014-10-28 |
| 9 | Steve | 2014-01-28 |
| 10 | George | 2014-01-07 |
| 11 | John | 2013-03-25 |
| 12 | Phil | 2014-09-30 |
| 13 | Jack | 2015-03-06 |
| 14 | Paul | 2012-05-11 |
| 15 | Rob | 2012-04-01 |
| 16 | Walt | 2013-09-15 |
| 17 | Nathan | 2014-02-28 |
| 18 | Dan | 2012-05-28 |
| 19 | Jeff | 2012-09-01 |
| 20 | Bill | 2014-05-03 |
| 21 | Joe | 2014-10-16 |
| 22 | Bob | 2012-11-25 |
| 23 | Matt | 2012-11-03 |
| 24 | Mark | 2013-01-30 |
| 25 | Tom | 2013-10-31 |
| 26 | Jake | 2014-10-16 |
| 27 | Greg | 2014-04-15 |
| 28 | Adam | 2012-04-17 | << Previous 1 2 3 4 5 6 Next >> |