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

Search:

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 engine	Browser	Engine version	CSS grade

 

Showing 1 to 57 of 57 entries

Examples

• Basic initialisation
• Activate with a mouseover rather than click
• Custom text in the button
• Using with jQuery UI ThemeRoller
• Excluding columns from the show / hide list
• Two tables initialised together - individual controls
• Two tables initialised together - shared control
• Alternative styling and reset to original
• Customisation of the button label with a callback

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";
		}
	} );
} );