DataTables

• Usage
• Examples
• Styling
• API
• Development
• Editor
• Extras
• Plug-ins
• Blog
• FAQs
• Forums

Purchase

Download

Support

Preamble

This example shows how the API that ColVis presents can be used to control the column visibility of two tables with a single instance of ColVis. The result is that changing a button state will effect all tables on the page. This can be useful when looking at multiple tables which have the same column structure.

Live example

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 () {
	var oTables = $('table').dataTable( {
		"sDom": 'lfrtip'
	} );
	
	var oColVis = new ColVis( oTables.fnSettings() );
	$(oColVis).bind('stateChange', function (e, data) {
		var jqTables = $('table:not(#example)');
		for ( var i=0, iLen=jqTables.length ; i<iLen ; i++ ) {
			$(jqTables[i]).dataTable().fnSetColumnVis( data.iColumn, data.bVisible );
		}
	} );
	
	document.getElementById('buttonInsert').appendChild(oColVis.dom.wrapper);
	oColVis.fnRebuild();
} );