DataTables logo DataTables

This site contains the legacy documentation for DataTables v1.9 and earlier for reference only.
DataTables 1.9 was End Of Life in 2014. Do not use it for new work.
The current release of DataTables can always be found on DataTables.net.
ColVis v1.1.0

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 ColVis can be performed in one of two different ways:

  1. Using 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'
	} );
} );
  2. Using new $.fn.dataTable.ColVis();: 
    $(document).ready( function () {
	var table = $('#example').DataTable();
	var colvis = new $.fn.dataTable.ColVis( table );

	$( colvis.button() ).insertAfter('div.info');
} );

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"
		}
	} );
} );


// DataTables 1.10 camelCase style
$(document).ready( function () {
	$('#example').dataTable( {
		"dom": 'C<"clear">lfrtip',
		"colVis": {
			"activate": "mouseover"
		}
	} );
} );
aiExclude or exclude Why two names?
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. As well as indexes, this array can also contain the string 'all' which indicates that all columns should be excluded from the list. This is useful when using ColVis' grouping buttons feature.
Default: []
Type: Array
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'C<"clear">lfrtip',
		"oColVis": {
			"aiExclude": [ 0 ]
		}
	} );
} );


// DataTables 1.10 camelCase style:
$(document).ready( function () {
	$('#example').dataTable( {
		"dom": 'C<"clear">lfrtip',
		"colVis": {
			"exclude": [ 0 ]
		}
	} );
} );
bRestore or restore Why two names?
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
		}
	} );
} );


// DataTables 1.10 camelCase style
$(document).ready( function () {
	$('#example').dataTable( {
		"dom": 'C<"clear">lfrtip',
		"colVis": {
			"restore": 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"
		}
	} );
} );


// DataTables 1.10 camelCase style
$(document).ready( function () {
	$('#example').dataTable( {
		"dom": 'C<"clear">lfrtip',
		"colVis": {
			"buttonText": "Change columns"
		}
	} );
} );
fnLabel or label Why two names?
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;
		  }
		}
	} );
} );


// DataTables 1.10 camelCase style
$(document).ready( function () {
	$('#example').dataTable( {
		"dom": 'C<"clear">lfrtip',
		"colVis": {
		  "label": function ( index, title, th ) {
		    return (index+1) +'. '+ title;
		  }
		}
	} );
} );
fnStateChange or stateChange Why two names?
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
iOverlayFade or overlayFade Why two names?
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
		}
	} );
} );


// DataTables 1.10 camelCase style
$(document).ready( function () {
	$('#example').dataTable( {
		"dom": 'C<"clear">lfrtip',
		"colVis": {
			"overlayFade": 1000
		}
	} );
} );
sAlign or align Why two names?
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"
		}
	} );
} );


// DataTables 1.10 camelCase style
$(document).ready( function () {
	$('#example').dataTable( {
		"dom": 'C<"clear">lfrtip',
		"colVis": {
			"align": "right"
		}
	} );
} );
sRestore or restore Why two names?
Show details 		This parameter provides the ability to customise the text for the restore button. Note that when using camelCase style, if this parameter is defined, it is assumed that the restore button should be shown.
Default: Restore original
Type: String
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"sDom": 'C<"clear">lfrtip',
		"oColVis": {
			"bRestore": true,
			"sRestore": "Revert to original visibility"
		}
	} );
} );


// DataTables 1.10 camelCase style
$(document).ready( function () {
	$('#example').dataTable( {
		"dom": 'C<"clear">lfrtip',
		"colVis": {
			"restore": "Revert to original visibility"
		}
	} );
} );

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