jQuery columnManager plugin

Example zero (all-in-one):


	$('#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)
onetwothreedont hide me
  • select columns
    onetwothreehello-
    onetwothreehello-
    onetwothreehello-
    onetwothreehello-

    Example zero-zero (with colspans and rowspans):

    
    	$('#tablecol').columnManager({listTargetID:'targetcol', onClass: 'simpleon', offClass: 'simpleoff'});
    	
    onetwothreefour
    onetwothreefour
    onetwothreefour
    onetwothreefour
    onetwo/three
    twothree
    twothreefour
    one/twofour
    onetwofour
    onetwothreefour
    twothreefour
    onetwothreefour
    one<->four
    onetwothreefour
    onetwothreefour
    twothreefour
    two<->four
    twothreefour
    toggle columns:

    Example one:

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

    Example two:

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

    Example three:

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

    Example four:

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

    Example five:

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

    Example six (no column header list):

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

    toggle column index(number):

    Example seven:

    
    	$('#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');
    	}});
    	
    onetwothreefour
    onetwothreefour
    onetwothreefour
    onetwothreefour
    onetwothreefour
    toggle columns: