Sortable Table
Description
This is a simplified demo of a sortable data table (yes, a valid reason to use the <table> tag). Since it doesn't use an actual Ajax call to sort the table (that could be a nice addition on larger data tables), I place it in the category of handy Ajax-like animated effects that are useful to achieve that "Web 2.0" look and feel that we love so much.
Check out the original documentation for the many additional options and how to implement them. Some of the options that caught my eye: setting initial sort order, disabling headers from sort, and the pager plugin.
Demo
Click a table header to sort by a column of data. Click again to toggle the sort between ascending and descending order. Shift-Click to sort by more than one column.
| First Name | Last Name | Age | Total | Discount | Date |
|---|---|---|---|---|---|
| John | Smith | 24 | $4.99 | 20% | July 6, 2009 |
| Jane | Johnson | 33 | $15.55 | 15% | November 16, 2000 |
| Marco | Polo | 45 | $16.89 | 43% | January 1, 2008 |
| Mickey | Mouse | 99 | $123.65 | 5% | September 9, 2009 |
| Miles | Davis | 34 | $56.78 | 99% | August 12, 2000 |
Reference
- Author: Christian Bach
- Technologies: jQuery
- Source: Tablesorter 2.0
- License: MIT, GPL