Options

This extension has now been retired and replaced with the column visibility module for Buttons. The documentation is retained for legacy reference only. New projects should use Buttons in preference to ColVis.

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 dom initialisation option and the parameter 'C' that ColVis adds to DataTables. For example:

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

2 - Using new $.fn.dataTable.ColVis();:

$(document).ready( function () {
    var table = $('#example').DataTable();
    var colvis = new $.fn.dataTable.ColVis( table, {
        buttonText: 'Select columns'
    } );

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

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": '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
        
groups
Show details
Define buttons that toggle groups of columns. Each item in the array should be an object that has two parameters: title - the text to show for the button, and columns - an array of column index integers describing the columns that the group will control.
Default: null - i.e. no groups are shown
Type: array of objects
Code example: $(document).ready( function () { $('#example').DataTable( { dom: 'C<"clear">lfrtip', colVis: { groups: [ { title: "Engine", columns: [ 0, 3 ] }, { title: "Client", columns: [ 1, 2 ] } ] } } ); } );
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"
        }
    } );
} );
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": 'C<"clear">lfrtip',
        "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": 'C<"clear">lfrtip',
        "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": '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"
        }
    } );
} );