Options › Options
activate
Show details
This parameter denotes how the dropdown list of columns can be activated by the end user. Its value should be either "mouseover" or "click".
Default:
click
Type:
String
Code example:
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'Clfrtip',
"oColVis": {
"activate": "mouseover"
}
} );
} );
// DataTables 1.10 camelCase style
$(document).ready( function () {
$('#example').dataTable( {
"dom": 'Clfrtip',
"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": 'Clfrtip',
"oColVis": {
"aiExclude": [ 0 ]
}
} );
} );
// DataTables 1.10 camelCase style:
$(document).ready( function () {
$('#example').dataTable( {
"dom": 'Clfrtip',
"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": 'Clfrtip',
"oColVis": {
"bRestore": true
}
} );
} );
// DataTables 1.10 camelCase style
$(document).ready( function () {
$('#example').dataTable( {
"dom": 'Clfrtip',
"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": 'Clfrtip',
"oColVis": {
"buttonText": "Change columns"
}
} );
} );
// DataTables 1.10 camelCase style
$(document).ready( function () {
$('#example').dataTable( {
"dom": 'Clfrtip',
"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:
int: The column index being operated on
string: The title detected by DataTables' automatic methods.
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": 'Clfrtip',
"oColVis": {
"fnLabel": function ( index, title, th ) {
return (index+1) +'. '+ title;
}
}
} );
} );
// DataTables 1.10 camelCase style
$(document).ready( function () {
$('#example').dataTable( {
"dom": 'Clfrtip',
"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:
int - Column being changed
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 ; iiOverlayFade 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": 'Clfrtip',
"oColVis": {
"iOverlayFade": 1000
}
} );
} );
// DataTables 1.10 camelCase style
$(document).ready( function () {
$('#example').dataTable( {
"dom": 'Clfrtip',
"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": 'Clfrtip',
"oColVis": {
"sAlign": "right"
}
} );
} );
// DataTables 1.10 camelCase style
$(document).ready( function () {
$('#example').dataTable( {
"dom": 'Clfrtip',
"colVis": {
"align": "right"
}
} );
} );
showAll
Show details
This parameter is used to enable a button that, when selected, will show all columns in the table. The value given is used as the button's display text. 1.1.1
Default:
null
Type:
String
Code example:
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'Clfrtip',
"oColVis": {
"showAll": "Show all",
"showNone": "Show none"
}
} );
} );
showNone
Show details
This parameter is used to enable a button that, when selected, will hide all columns in the table. The value given is used as the button's display text. 1.1.1
Default:
null
Type:
String
Code example:
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'Clfrtip',
"oColVis": {
"showAll": "Show all",
"showNone": "Show none"
}
} );
} );
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": 'Clfrtip',
"oColVis": {
"bRestore": true,
"sRestore": "Revert to original visibility"
}
} );
} );
// DataTables 1.10 camelCase style
$(document).ready( function () {
$('#example').dataTable( {
"dom": 'Clfrtip',
"colVis": {
"restore": "Revert to original visibility"
}
} );
} );