This widget extends a standard HTML table. You could add a sorting functionality, add a pager functionality, hide cols and rows — pretty cool when a user has to handle huge tables.
The functional demo demonstrates what is possible using this widget: some lines of jQuery implement a panel to control the columns or a very simple search. Both examples are not part of the widget itself and have no accessibility features, but could be interesting if you wish to extend the widget yourself.
Take a look at the performance demo if you are concerned about speed issues. While developing performance and stability was permanently tested, but keep in mind that we have to run trough every table cell. However, really big tables (10.000+) should be initialized by adding data with a JSON file (please provide a dummy table) or by extending the widget with a loading screen.
Minified file size is less than 11 KB.
Structure of a table used with the widget:
<table summary="Summery text"> <caption>Some caption</caption> <thead> <tr> <th><a href="#server_site_order">Head</a></th> . . . </tr> </thead> <tbody> <tr> <td>cotent</td> . . . </tr> . . . </tbody> </table>
As the head elements (th) are not deleted, you could define sorting methods or CSS styles as you wish — even after initialization. It’s possible to set server site sorting, if Java-Script is disabled or a complex sorting is needed, by defining hyperlinks (recommended).
Control the used sorting method by adding a CSS class to each head element (th):
|CSS class||example data|
|ui-table-text||text alphabetically and time; default|
|ui-table-text-html||text with HTML tags alphabetically|
|ui-table-number||123 or 123.456|
|ui-table-deactivate||deactivates sorting for this column|
|ui-state-active||class to set a column as presorted (server site)|
Default sorting method (text alphabetically) also sorts time: 20:00:13.
The widget works (with small tables) out-of-the-box but there are a few more options to configure the widget:
|rowToStart||number||1||row to start (starts with 1)|
|rowsToShow||number||false||how many rows shown (starts with 1, false = show all)|
|colScopeRow||number||1||defines row head (specify a col, starts with 0)|
|defaultSortBy||string||asc||first sort ascending or descending (asc or desc)|
|colsToHide||array||false||Array of columns hide (starts with index 0)|
|rowsToHide||array||false||Array of rows to hide (starts with index 0)|
|keyboard||boolean||true||set keyboard control active|
|pager||boolean||false||set pager functionality|
|jqAddress.enable||boolean||true||enable browser history support|
|jqAddress.title.enable||boolean||true||enable title change|
|jqAddress.title.split||string||Ι||set delimiter string|
|jqAddress.changeRow||boolean||true||allow user to change row range|
You need to add the add the jQuery Address file, if you like to use browser history support. jQuery Address support is currently only available in master branch (jQuery 1.4, UI 1.8).
The event onRowSort calls the function setHTML, but its callback is fired before.
|updateData||build new working array (which holds only not hided data)|
|setHTML||build and inject new tbody (parameter: is the new row number to begin; parameter is master branch only, legacy should update options.rowToStart manually)|
|rowSort||sort data and call setHTML|
|colSwitch||switches column (parameter: number); used by keyboard control)|
|buildPager||build and inject pager|
|setPager||set specific page as active (parameter: index)|
Take a look in the js/demo.js file to learn how to extend the widget for your needs.
This text is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported Licence.
Last edited by fnagel,