DataTables example Hidden columns

There are times when you might find it useful to display only a sub-set of the information that was available in the original table. For example you might want to reduce the amount of data shown on screen to make it clearer for the user. This is done through the columns.visibleDT column option.

The column that is hidden is still part of the table and can be made visible through the api column().visible() API method at a future time if you wish to have columns which can be shown and hidden.

Furthermore, as the hidden data is still part of the table, it can still, optionally, be filtered upon allowing the user access to that data (for example 'tag' information for a row entry might used).

In the table below both the office and age version columns have been hidden, the former is not searchable, the latter is.

NamePositionStart dateSalary
NamePositionStart dateSalary
Airi Satou Accountant 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author 2009/01/12 $86,000
Bradley Greer Software Engineer 2012/10/13 $132,000
Brenden Wagner Software Engineer 2011/06/07 $206,850
Brielle Williamson Integration Specialist 2012/12/02 $372,000
Bruno Nash Software Engineer 2011/05/03 $163,500
Caesar Vance Pre-Sales Support 2011/12/12 $106,450
Cara Stevens Sales Assistant 2011/12/06 $145,600
Cedric Kelly Senior Javascript Developer 2012/03/29 $433,060
Showing 1 to 10 of 57 entries

The Javascript shown below is used to initialise the table shown in this example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
    $('#example').dataTable( {
        "columnDefs": [
            {
                "targets": [ 2 ],
                "visible": false,
                "searchable": false
            },
            {
                "targets": [ 3 ],
                "visible": false
            }
        ]
    } );
} );

In addition to the above code, the following Javascript library files are loaded for use in this example: