JAVASCRIPT EXAMPLES Basic Table Sort
This example demonstrates how the Uize.Widget.TableSort widget class can be used to add sorting capability to a table on a page - without the table having to be generated by JavaScript, and without the table having to have messy JavaScript event handlers inside the HTML markup, and - most importantly - without the table having to be destroyed and rebuilt. This is an example of one of the several progressive enhancement (aka "unobtrusive JavaScript") features provided by the UIZE JavaScript Framework.
Move your mouse over the table's column headings and notice how the heading becomes highlighted. Also, a tooltip indicates what action will result from clicking a heading. Click a heading and see how the table is instantaneously sorted by the data in that column. Click again to reverse the sort order. The Uize.Widget.TableSort class adds a few other progressive enhancements. Move your mouse over the rows of data and see how the current row is highlighted. This makes it easier for the eye to follow the row from left to right, allowing you to make sure you're reading data for the row that you think you're reading it for - something that is notoriously difficult for wide tables. Notice also, how a tooltip for each column's data displays the heading of the column - helping with large tables that get scrolled so the user can no longer see the headings.
| Table of Friends | |||||||
| First Name | Last Name | Sex | Weight | Hair Color | Eye Color | Date of Birth | Known for How Long |
| John | Engelbrecht | male | 189 lbs | brown, light | gray | May 5 1963 | 5 years |
| Alissa | Pierson | female | 154 lbs | brown, dark | green | 3/29/1972 | 2 years |
| Paul | McKinley | male | 182 lbs | brown, graying | gray, blueish | 1971/08/03 | 10 years |
| Khalid | Muhalijurinaikar | male | 165 lbs | brown, dark | brown | 15 December 1966 | 3 years |
| Diego Rodriguez | Velasquez | male | 173 lbs | black | brown | 7/3/70 | 4 years |
| Patricia | Gilby-Elderhans | female | 191 lbs | blonde | blue green | 1967/11/25 | 1 year |
| Jacob | Cromley | male | 159 lbs | red | gray | 10 February 1975 | 2 years |
| Vanessa | Vermuelen | female | 152 lbs | brown, medium | blue | 8/15/77 | 1 year |
| Shelley | Bronsworth | female | 232 lbs | blonde, sandy | blue, grayish | 17 March 1962 | 3 years |
| Richard | van Doren | male | 149 lbs | brown | brown | October 23 1974 | .5 years |