ColVis example with alternative styling

Preamble

This demo of ColVis shows a number of different features of the plug-in. Firstly, it shows alternative styling of the plug-in with the button nested just above the scrollbar in the DataTable. Secondly there is a "Restore" button in the ColVis drop down, which will restore the original visibility settings when the table was initialised (this is controlled by using the "bRestore" option). Finally it shows that the drop down can be set to align on the right of the button, rather than the left.

Note that this demo requires DataTables 1.7.5 or later.

Live example

Rendering engine
Browser
Engine version
CSS grade
Gecko Firefox 1.5 1.8 A
Gecko Firefox 2.0 1.8 A
Gecko Firefox 3.0 1.9 A
Gecko Camino 1.0 1.8 A
Gecko Camino 1.5 1.8 A
Gecko Netscape 7.2 1.7 A
Gecko Netscape Browser 8 1.7 A
Gecko Netscape Navigator 9 1.8 A
Gecko Mozilla 1.0 1 A
Gecko Mozilla 1.1 1.1 A
Gecko Mozilla 1.2 1.2 A
Gecko Mozilla 1.3 1.3 A
Gecko Mozilla 1.4 1.4 A
Gecko Mozilla 1.5 1.5 A
Gecko Mozilla 1.6 1.6 A
Gecko Mozilla 1.7 1.7 A
Gecko Mozilla 1.8 1.8 A
Gecko Seamonkey 1.1 1.8 A
Gecko Epiphany 2.20 1.8 A
Gecko (UTF-8: $¢€) Firefox 1.0 1.7 A
KHTML Konqureror 3.1 3.1 C
KHTML Konqureror 3.3 3.3 A
KHTML Konqureror 3.5 3.5 A
Misc NetFront 3.1 - C
Misc NetFront 3.4 - A
Misc Dillo 0.8 - X
Misc Links - X
Misc Lynx - X
Misc IE Mobile - C
Misc PSP browser - C
Other browsers All others - U
Presto Opera 7.0 - A
Presto Opera 7.5 - A
Presto Opera 8.0 - A
Presto Opera 8.5 - A
Presto Opera 9.0 - A
Presto Opera 9.2 - A
Presto Opera 9.5 - A
Presto Opera for Wii - A
Presto Nokia N800 - A
Presto Nintendo DS browser 8.5 C/A1
Tasman Internet Explorer 4.5 - X
Tasman Internet Explorer 5.1 1 C
Tasman Internet Explorer 5.2 1 C
Trident Internet Explorer 4.0 4 X
Trident Internet Explorer 5.0 5 C
Trident Internet Explorer 5.5 5.5 A
Trident Internet Explorer 6 6 A
Trident Internet Explorer 7 7 A
Trident AOL browser (AOL desktop) 6 A
Webkit Safari 1.2 125.5 A
Webkit Safari 1.3 312.8 A
Webkit Safari 2.0 419.3 A
Webkit Safari 3.0 522.1 A
Webkit OmniWeb 5.5 420 A
Webkit iPod Touch / iPhone 420.1 A
Webkit S60 413 A
Rendering engineBrowserEngine versionCSS grade
Showing 1 to 57 of 57 entries

Examples

Initialisation code

$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": '<"H"fr>tC<"F"ip>',
		"bJQueryUI": true,
		"bPaginate": false,
		"sScrollY": "200px",
		"bScrollCollapse": true,
		"bScrollAutoCss": false,
		"aoColumnDefs": [
			{ "bVisible": false, "aTargets": [ 2 ] }
		],
		"oColVis": {
			"buttonText": "&nbsp;",
			"bRestore": true,
			"sAlign": "left"
		},
		"fnDrawCallback": function (o) {
			/* Position the ColVis button as needed */
			var nColVis = $('div.ColVis', o.nTableWrapper)[0];
			nColVis.style.width = o.oScroll.iBarWidth+"px";
			nColVis.style.top = ($('div.dataTables_scroll', o.nTableWrapper).position().top)+"px";
			nColVis.style.height = ($('div.dataTables_scrollHead table', o.nTableWrapper).height())+"px";
		}
	} );
} );