DataTables logo DataTables

via Ad Packs

Options

ColVis focuses quite tightly on providing DataTables with a simple and effective columns visibility button, so the number of options it needs to provide for this operation are fairly simple. Those which are available are listed below.

Initialisation

Initialisation of ColReorder is done through the use of the DataTables sDom initialisation option and the parameter 'C' that ColVis adds to DataTables. For example:

$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'C<"clear">lfrtip'
	} );
} );

ColVis options

activate
Show details 		This parameter denotes how the dropdown list of columns can be activated by the end user. It's value should be either "mouseover" or "click".
Default: click
Type: String
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'C<"clear">lfrtip',
		"oColVis": {
			"activate": "mouseover"
		}
	} );
} );
aiExclude
Show details 		This array contains the column indexes which you wish to exclude from the list of columns in the dropdown list, effectively meaning that the end user has no control over the visibility of those columns.
Default: []
Type: Array
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'C<"clear">lfrtip',
		"oColVis": {
			"aiExclude": [ 0 ]
		}
	} );
} );
bRestore
Show details 		Include a "restore" button in the column list. The restore button provides an additional button which when activated causes the column visibility to return to what it was when DataTables was initialised.
Default: false
Type: Boolean
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'C<"clear">lfrtip',
		"oColVis": {
			"bRestore": true
		}
	} );
} );
buttonText
Show details 		The text that will be used in the button.
Default: Show / hide columns
Type: String
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'C<"clear">lfrtip',
		"oColVis": {
			"buttonText": "Change columns"
		}
	} );
} );
fnLabel
Show details 		Allows customisation of the labels used for the buttons (useful for stripping HTML for example).
Default: null
Input parameters:
  1. int: The column index being operated on
  2. string: The title detected by DataTables' automatic methods.
  3. node: The TH element for the column
Return parameter: string: The value to use for the button table
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'C<"clear">lfrtip',
		"oColVis": {
		  "fnLabel": function ( index, title, th ) {
		    return (index+1) +'. '+ title;
		  }
		}
	} );
} );
fnStateChange
Show details 		Callback function to let you know when the state has changed.
Default:
Input parameters:
  1. int - Column being changed
  2. boolean - Visibility state
Return parameter: Void
Code example: 
$(document).ready( function () {
	var oTables = $('table').dataTable( {
		"sDom": 'lfrtip'
	} );
	
	var oColVis = new ColVis( oTables.fnSettings(), {
		"fnStateChange": function ( iColumn, bVisible ) {
			var jqTables = $('table:not(#example)'); // ColVis will do #example
			for ( var i=0, iLen=jqTables.length ; i<iLen ; i++ ) {
				$(jqTables[i]).dataTable().fnSetColumnVis( iColumn, bVisible );
			}
		}
	} );
	
	document.getElementById('buttonInsert').appendChild(oColVis.dom.wrapper);
	oColVis.fnRebuild();
} );
iOverlayFade
Show details 		Alter the duration used for the fade in / out animation of the column visibility buttons when the control button is clicked on. The value of the parameter is interpreted as milliseconds.
Default: 500
Type: int
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'C<"clear">lfrtip',
		"oColVis": {
			"iOverlayFade": 1000
		}
	} );
} );
sAlign
Show details 		This parameter provides the ability to specify which edge of the control button the drop down column visibility list should align to - either "left" or "right"
Default: left
Type: String
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'C<"clear">lfrtip',
		"oColVis": {
			"sAlign": "right"
		}
	} );
} );
sRestore
Show details 		This parameter provides the ability to customise the text for the restore button.
Default: Restore original
Type: String
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'C<"clear">lfrtip',
		"oColVis": {
			"bRestore": true,
			"sRestore": "Revert to original visibility"
		}
	} );
} );
sSize
Show details 		Control if ColVis should attempt to size the buttons in the display automatically (the default) or not. In the latter case you can specify the button and background width with CSS.
Default: automatic
Type: string
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'C<"clear">lfrtip',
		"oColVis": {
		  "sSize": "css"
		}
	} );
} );

Please note that the discrepancy of the notation for 'activate' and 'buttonText' will be corrected in future versions, although retaining backwards compatibility.