UIZE JavaScript Framework


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