Table enhancement (DataTables integration)
The table enhancement plugin adds advanced functionality such as sorting, filtering, pagination to tables.
Summary
The table enhancement plugin is an interface between WET and DataTables (a JQuery plugin).
It uses the data-wet-boew attribute to feed custom options to the dataTables plugin.
Basic Enhanced Table
To activate the plugin add wet-boew-tables to the class attribute of any table tag you wish you enhance.
<table class="wet-boew-tables"> <thead> <tr><td>Heading 1</td></tr> </thead> <tbody> <tr><td>Cell 1</td></tr> </tbody> <tfoot> <tr><td>Footer 1</td></tr> </tfoot> </table>
Example - Basic
Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
---|---|---|---|---|
Other browsers | All others | - | - | U |
Trident | AOL browser (AOL desktop) | Win XP | 6 | A |
Gecko | Camino 1.0 | OSX.2+ | 1.8 | A |
Gecko | Camino 1.5 | OSX.3+ | 1.8 | A |
Misc | Dillo 0.8 | Embedded devices | - | X |
Gecko | Epiphany 2.20 | Gnome | 1.8 | A |
Gecko | Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
Gecko | Firefox 1.5 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Firefox 2.0 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Firefox 3.0 | Win 2k+ / OSX.3+ | 1.9 | A |
Options
The options are provided via the data-wet-boew attribute. The naming conventions of the options are selected from or mimic existing DataTables options where possible.
<table class="wet-boew-tables" data-wet-boew=''>
The various optional functionality available to the table plugin are organized into the following categories:
Filtering
To enable or disable table filtering use the bSearch option, false will turn it off. It is set to true by default.
<table class="wet-boew-tables" data-wet-boew='{"bSearch": false}'>
Example - Disable Filtering
Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
---|---|---|---|---|
Other browsers | All others | - | - | U |
Trident | AOL browser (AOL desktop) | Win XP | 6 | A |
Gecko | Camino 1.0 | OSX.2+ | 1.8 | A |
Gecko | Camino 1.5 | OSX.3+ | 1.8 | A |
Misc | Dillo 0.8 | Embedded devices | - | X |
Gecko | Epiphany 2.20 | Gnome | 1.8 | A |
Gecko | Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
Gecko | Firefox 1.5 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Firefox 2.0 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Firefox 3.0 | Win 2k+ / OSX.3+ | 1.9 | A |
Hidden Columns
Columns can be hidden using the bVisible and aColumns. To enable hidden columns set bVisible to true and enter the column numbers you wish to hide in aColumns. By default bVisible is set to true. Column numbers start at 0.
For this example we will set the last column to be hidden.
<table class="wet-boew-tables" data-wet-boew='{"bVisible": false, "aColumns": [4]}'>
Example - Hidden Columns
Rendering engine | Browser | Platform(s) | Engine version |
---|---|---|---|
Other browsers | All others | - | - |
Trident | AOL browser (AOL desktop) | Win XP | 6 |
Gecko | Camino 1.0 | OSX.2+ | 1.8 |
Gecko | Camino 1.5 | OSX.3+ | 1.8 |
Misc | Dillo 0.8 | Embedded devices | - |
Gecko | Epiphany 2.20 | Gnome | 1.8 |
Gecko | Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 |
Gecko | Firefox 1.5 | Win 98+ / OSX.2+ | 1.8 |
Gecko | Firefox 2.0 | Win 98+ / OSX.2+ | 1.8 |
Gecko | Firefox 3.0 | Win 2k+ / OSX.3+ | 1.9 |
Hidden Mobile Columns
For situations where different columns need to be visible in desktop and mobile views, use aMobileColumns. By default any columns hidden using aColumns will be hidden for both mobile and desktop views.
<table class="wet-boew-tables" data-wet-boew='{"bVisible": false, "aColumns": [4], "aMobileColumns": [1,2,3]}'>
Example - Hidden Mobile Columns
In order to properly view this example you will need to view it on a mobile device or a small browser resolution.
Rendering engine | CSS grade |
---|---|
Other browsers | U |
Trident | A |
Gecko | A |
Gecko | A |
Misc | X |
Gecko | A |
Gecko | A |
Gecko | A |
Gecko | A |
Gecko | A |
Pagination
Pagination can be enabled or disabled using the bPaginate option, by default it is set to true. The default table size can be configured using iDisplayLength, the default display length is 10.
<table class="wet-boew-tables" data-wet-boew='{"bPaginate": false}'>
Example - Disable Pagination
Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
---|---|---|---|---|
Other browsers | All others | - | - | U |
Trident | AOL browser (AOL desktop) | Win XP | 6 | A |
Gecko | Camino 1.0 | OSX.2+ | 1.8 | A |
Gecko | Camino 1.5 | OSX.3+ | 1.8 | A |
Misc | Dillo 0.8 | Embedded devices | - | X |
Gecko | Epiphany 2.20 | Gnome | 1.8 | A |
Gecko | Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
Gecko | Firefox 1.5 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Firefox 2.0 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Firefox 3.0 | Win 2k+ / OSX.3+ | 1.9 | A |
Misc | IE Mobile | Windows Mobile 6 | - | C |
Trident | Internet Explorer 4.0 | Win 95+ | 4 | X |
Trident | Internet Explorer 5.0 | Win 95+ | 5 | C |
Trident | Internet Explorer 5.5 | Win 95+ | 5.5 | A |
Trident | Internet Explorer 6 | Win 98+ | 6 | A |
Tasman | Internet Explorer 4.5 | Mac OS 8-9 | - | X |
Tasman | Internet Explorer 5.1 | Mac OS 7.6-9 | 1 | C |
Tasman | Internet Explorer 5.2 | Mac OS 8-X | 1 | C |
Trident | Internet Explorer 7 | Win XP SP2+ | 7 | A |
Webkit | iPod Touch / iPhone | iPod | 420.1 | A |
KHTML | Konqureror 3.1 | KDE 3.1 | 3.1 | C |
KHTML | Konqureror 3.3 | KDE 3.3 | 3.3 | A |
KHTML | Konqureror 3.5 | KDE 3.5 | 3.5 | A |
Misc | Links | Text only | - | X |
Misc | Lynx | Text only | - | X |
Gecko | Mozilla 1.0 | Win 95+ / OSX.1+ | 1 | A |
Gecko | Mozilla 1.1 | Win 95+ / OSX.1+ | 1.1 | A |
Gecko | Mozilla 1.2 | Win 95+ / OSX.1+ | 1.2 | A |
Gecko | Mozilla 1.3 | Win 95+ / OSX.1+ | 1.3 | A |
Gecko | Mozilla 1.4 | Win 95+ / OSX.1+ | 1.4 | A |
Gecko | Mozilla 1.5 | Win 95+ / OSX.1+ | 1.5 | A |
Gecko | Mozilla 1.6 | Win 95+ / OSX.1+ | 1.6 | A |
Gecko | Mozilla 1.7 | Win 98+ / OSX.1+ | 1.7 | A |
Gecko | Mozilla 1.8 | Win 98+ / OSX.1+ | 1.8 | A |
Misc | NetFront 3.1 | Embedded devices | - | C |
Misc | NetFront 3.4 | Embedded devices | - | A |
Gecko | Netscape 7.2 | Win 95+ / Mac OS 8.6-9.2 | 1.7 | A |
Gecko | Netscape Browser 8 | Win 98SE+ | 1.7 | A |
Gecko | Netscape Navigator 9 | Win 98+ / OSX.2+ | 1.8 | A |
Presto | Nintendo DS browser | Nintendo DS | 8.5 | C/A |
Presto | Nokia N800 | N800 | - | A |
Webkit | OmniWeb 5.5 | OSX.4+ | 420 | A |
Presto | Opera 7.0 | Win 95+ / OSX.1+ | - | A |
Presto | Opera 7.5 | Win 95+ / OSX.2+ | - | A |
Presto | Opera 8.0 | Win 95+ / OSX.2+ | - | A |
Presto | Opera 8.5 | Win 95+ / OSX.2+ | - | A |
Presto | Opera 9.0 | Win 95+ / OSX.3+ | - | A |
Presto | Opera 9.2 | Win 88+ / OSX.3+ | - | A |
Presto | Opera 9.5 | Win 88+ / OSX.3+ | - | A |
Presto | Opera for Wii | Wii | - | A |
Misc | PSP browser | PSP | - | C |
Webkit | S60 | S60 | 413 | A |
Webkit | Safari 1.2 | OSX.3 | 125.5 | A |
Webkit | Safari 1.3 | OSX.3 | 312.8 | A |
Webkit | Safari 2.0 | OSX.4+ | 419.3 | A |
Webkit | Safari 3.0 | OSX.4+ | 522.1 | A |
Gecko | Seamonkey 1.1 | Win 98+ / OSX.2+ | 1.8 | A |
Custom Menu
The table size selection box can be customized using aLengthMenu. This option will accept 1 or 2 JSON arrays, this first array will be the integer values used to set the page size, and the second is the text strings naming the sizes located in the drop-down menu. This is mostly used for the "All" option, which has an integer value of -1.
<table class="wet-boew-tables" data-wet-boew='{"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], "iDisplayLength": 25}'>
Example - Custom Menu
Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
---|---|---|---|---|
Other browsers | All others | - | - | U |
Trident | AOL browser (AOL desktop) | Win XP | 6 | A |
Gecko | Camino 1.0 | OSX.2+ | 1.8 | A |
Gecko | Camino 1.5 | OSX.3+ | 1.8 | A |
Misc | Dillo 0.8 | Embedded devices | - | X |
Gecko | Epiphany 2.20 | Gnome | 1.8 | A |
Gecko | Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
Gecko | Firefox 1.5 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Firefox 2.0 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Firefox 3.0 | Win 2k+ / OSX.3+ | 1.9 | A |
Misc | IE Mobile | Windows Mobile 6 | - | C |
Trident | Internet Explorer 4.0 | Win 95+ | 4 | X |
Trident | Internet Explorer 5.0 | Win 95+ | 5 | C |
Trident | Internet Explorer 5.5 | Win 95+ | 5.5 | A |
Trident | Internet Explorer 6 | Win 98+ | 6 | A |
Tasman | Internet Explorer 4.5 | Mac OS 8-9 | - | X |
Tasman | Internet Explorer 5.1 | Mac OS 7.6-9 | 1 | C |
Tasman | Internet Explorer 5.2 | Mac OS 8-X | 1 | C |
Trident | Internet Explorer 7 | Win XP SP2+ | 7 | A |
Webkit | iPod Touch / iPhone | iPod | 420.1 | A |
KHTML | Konqureror 3.1 | KDE 3.1 | 3.1 | C |
KHTML | Konqureror 3.3 | KDE 3.3 | 3.3 | A |
KHTML | Konqureror 3.5 | KDE 3.5 | 3.5 | A |
Misc | Links | Text only | - | X |
Misc | Lynx | Text only | - | X |
Sorting
Sorting is accomplished by clicking on table headers, the sort order is indicated by an up or down triangle next to the column name. When a column is clicked the table is resorted based on that column, if clicked again it is sorted in reverse order. The default sort order is set to the first column in ascending order.
Sorting can be enabled or disabled using the bSort option, by default it is on.
<table class="wet-boew-tables" data-wet-boew='{"bSort": false}'>
Example - Disable Sorting
Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
---|---|---|---|---|
Trident | Internet Explorer 4.0 | Win 95+ | 4 | X |
Trident | Internet Explorer 5.0 | Win 95+ | 5 | C |
Trident | Internet Explorer 5.5 | Win 95+ | 5.5 | A |
Trident | Internet Explorer 6 | Win 98+ | 6 | A |
Trident | Internet Explorer 7 | Win XP SP2+ | 7 | A |
Trident | AOL browser (AOL desktop) | Win XP | 6 | A |
Gecko | Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
Gecko | Firefox 1.5 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Firefox 2.0 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Firefox 3.0 | Win 2k+ / OSX.3+ | 1.9 | A |
Initialize Sort Order
Initial table sorting is set by the aaSorting option. To set the initial sort to nothing pass an empty array to the aaSorting option. The array is in a JSON format and accepts numbers for the column and asc or desc for the order.
<table class="wet-boew-tables" data-wet-boew='{"aaSorting": [[2, "desc"]]}'>
Example - Initialize Sort Order
Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
---|---|---|---|---|
Misc | IE Mobile | Windows Mobile 6 | - | C |
Trident | Internet Explorer 7 | Win XP SP2+ | 7 | A |
Trident | AOL browser (AOL desktop) | Win XP | 6 | A |
Gecko | Netscape Browser 8 | Win 98SE+ | 1.7 | A |
Gecko | Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
Gecko | Firefox 1.5 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Firefox 2.0 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Netscape Navigator 9 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Seamonkey 1.1 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Mozilla 1.7 | Win 98+ / OSX.1+ | 1.7 | A |
Multi-Column Sorting
Sorting by more than one column can be established by holding the shift key when clicking on the additional columns. To initialize a multi-column sort add more than one column to the aaSorting option.
<table class="wet-boew-tables" data-wet-boew='{"aaSorting": [[2, "desc"], [3, "asc"]]}'>
Example - Initialize Multiple Column Sorting
Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
---|---|---|---|---|
Misc | IE Mobile | Windows Mobile 6 | - | C |
Trident | Internet Explorer 7 | Win XP SP2+ | 7 | A |
Trident | AOL browser (AOL desktop) | Win XP | 6 | A |
Gecko | Netscape Browser 8 | Win 98SE+ | 1.7 | A |
Gecko | Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
Gecko | Firefox 1.5 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Firefox 2.0 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Netscape Navigator 9 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Seamonkey 1.1 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Mozilla 1.7 | Win 98+ / OSX.1+ | 1.7 | A |
- Date modified: