Example zero (all-in-one):

create the column header list inside the element with the ID "targetone"
define on and off classes for the column header list
don't include the last two columns in the list
save the visibility state informations for the next visit
hide the columns one and three by default
toggle the columns through the three buttons
use custom show/hide functions when using the buttons


	$('#tableall').columnManager({listTargetID:'targetall', onClass: 'advon', offClass: 'advoff', hideInList: [4,5], 
					saveState: true, colsHidden: [1,3]});
	
	var opt = {listTargetID: 'targetall', onClass: 'advon', offClass: 'advoff', 
			hide: function(c){
				$(c).fadeOut();
			}, 
			show: function(c){
				$(c).fadeIn();
			}};
	$('#buttonone').click(function(){ $('#tableall').toggleColumns(1, opt); });
	$('#buttontwo').click(function(){ $('#tableall').toggleColumns(2, opt); });
	$('#buttonthree').click(function(){ $('#tableall').toggleColumns(3, opt); });
	$('#buttonshowall').click(function(){ $('#tableall').showColumns(null, opt); });
	$('#buttonshow').click(function(){ $('#tableall').showColumns([1], opt); });
	$('#buttonhide').click(function(){ $('#tableall').hideColumns([2, 3], opt); });

it is using the clickmenu plugin (click on the image in the last column)

one	two	three	dont hide me
one	two	three	hello	-
one	two	three	hello	-
one	two	three	hello	-
one	two	three	hello	-

Example zero-zero (with colspans and rowspans):

create the column header list inside the element with the ID "targetcol"
define on and off classes for the column header list


	$('#tablecol').columnManager({listTargetID:'targetcol', onClass: 'simpleon', offClass: 'simpleoff'});

one	two	three	four
one	two	three	four
one	two	three	four
one	two	three	four
one	two/three
	two	three
	two	three	four
one/two			four
one	two		four
one	two	three	four
one	two	three	four
one	two	three	four
one<->four
one	two	three	four
one	two	three	four
	two	three	four
	two<->four
	two	three	four

toggle columns:

Example one:

create the column header list inside the element with the ID "targetone"


	$('#tableone').columnManager({listTargetID:'targetone'});

one	two	three	four
one	two	three	four
one	two	three	four
one	two	three	four
one	two	three	four

toggle columns:

Example two:

create the column header list inside the element with the ID "targettwo"
don't include the columns one and three in the list


	$('#tabletwo').columnManager({listTargetID:'target_3', hideInList:[1, 3]});

one	two	three	four
one	two	three	four
one	two	three	four
one	two	three	four
one	two	three	four

toggle columns:

Example three:

create the column header list inside the element with the ID "targetthree"
hide the columns one and three by default


	$('#tablethree').columnManager({listTargetID:'targetthree', colsHidden: [1,3]});

one	two	three	four
one	two	three	four
one	two	three	four
one	two	three	four
one	two	three	four

toggle columns:

Example four:

create the column header list inside the element with the ID "targetfour"
define on and off classes for the column header list


	$('#tablefour').columnManager({listTargetID:'targetfour', onClass: 'simpleon', offClass: 'simpleoff'});

one	two	three	four
one	two	three	four
one	two	three	four
one	two	three	four
one	two	three	four

toggle columns:

Example five:

create the column header list inside the element with the ID "targetfive"
define on and off classes for the column header list
save the visibility state informations for the next visit


	$('#tablefive').columnManager({listTargetID:'targetfive', onClass: 'simpleon', offClass: 'simpleoff', saveState: true});

one	two	three	four
one	two	three	four
one	two	three	four
one	two	three	four
one	two	three	four

toggle columns:

Example six (no column header list):

on button click: read the number from the input field and toggle it through the toggleColumn() function


	$('#button').click(function(){
		$('#tablesix').toggleColumns([+$('#number').val()]);
	});

one	two	three	four	five
one	two	three	four	five
one	two	three	four	five
one	two	three	four	five
one	two	three	four	five

toggle column index(number):

Example seven:

create the column header list inside the element with the ID "targetseven"
define on and off classes for the column header list
set a custom callback function (e.g. to save the state in a database)


	$('#tableseven').columnManager({listTargetID:'targetseven', onClass: 'simpleon', offClass: 'simpleoff', onToggle: function(index, state){
		state = ( state ) ? 'visible' : 'hidden';
		alert('you just toggled column number ' + index + '\nits ' + state + ' now');
	}});

one	two	three	four
one	two	three	four
one	two	three	four
one	two	three	four
one	two	three	four

toggle columns: