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 engineBrowserPlatform(s)Engine versionCSS 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
Showing 1 to 10 of 57 entries

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 engineBrowserPlatform(s)Engine versionCSS 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
Showing 1 to 10 of 57 entries

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 engineBrowserPlatform(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
Showing 1 to 10 of 57 entries

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 engineCSS grade
Other browsers U
Trident A
Gecko A
Gecko A
Misc X
Gecko A
Gecko A
Gecko A
Gecko A
Gecko A
Showing 1 to 10 of 57 entries

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 engineBrowserPlatform(s)Engine versionCSS 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
Showing 1 to 57 of 57 entries

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 engineBrowserPlatform(s)Engine versionCSS 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
Showing 1 to 25 of 57 entries

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 engineBrowserPlatform(s)Engine versionCSS 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
Showing 1 to 10 of 57 entries

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 engineBrowserPlatform(s)Engine versionCSS 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
Showing 1 to 10 of 57 entries

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 engineBrowserPlatform(s)Engine versionCSS 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
Showing 1 to 10 of 57 entries
 

loading