ColVis example

ColVis example - two tables with shared control

# 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

Rendering engine | Browser | Platform(s) | Engine version | CSS grade
--- | --- | --- | --- | ---
Rendering engine | Browser | Platform(s) | Engine version | CSS grade
Trident | Internet Explorer 4.0 | Win 95+ (Entity: &) | 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

Rendering engine | Browser | Platform(s) | Engine version | CSS grade
--- | --- | --- | --- | ---
Rendering engine | Browser | Platform(s) | Engine version | CSS grade
Gecko (UTF-8: $¢€) | 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
Gecko | Camino 1.0 | OSX.2+ | 1.8 | A
Gecko | Camino 1.5 | OSX.3+ | 1.8 | 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
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
Gecko | Seamonkey 1.1 | Win 98+ / OSX.2+ | 1.8 | A
Gecko | Epiphany 2.20 | Gnome | 1.8 | A

# 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();
    } );