jquery datatables hide column

Question

Is there a way with the jquery datatables plugin to hide (and show) a table column?

I figured out how to reload the table data: using fnClearTable and fnAddData.

But my issue is that in one of my views for the table (e.g. a hidden mode) I don't want to show certain columns.

Answer 1

You can define this during datatable initialization

"aoColumns": [{"bVisible": false},null,null,null]

Answer 2

Hide columns dynamically

The previous answers are using legacy DataTables syntax. In v 1.10+, you can use column().visible():

var dt = $('#example').DataTable();
//hide the first column
dt.column(0).visible(false);

To hide multiple columns, columns().visible() can be used:

var dt = $('#example').DataTable();
//hide the second and third columns
dt.columns([1,2]).visible(false);

Here is a Fiddle Demo.

Hide columns when the table is initialized

To hide columns when the table is initialized, you can use the columns option:

$('#example').DataTable( {
    'columns' : [
        null,
        //hide the second column
        {'visible' : false },
        null,
        //hide the fourth column
        {'visible' : false }
    ]
});

For the above method, you need to specify null for columns that should remain visible and have no other column options specified. Or, you can use columnDefs to target a specific column:

$('#example').DataTable( {
    'columnDefs' : [
        //hide the second & fourth column
        { 'visible': false, 'targets': [1,3] }
    ]
});

Answer 3

If use data from json and use Datatable v 1.10.19, you can do this:

More info

$(document).ready(function() {
     $('#example').dataTable( {

        columns= [
          { 
           "data": "name_data",
           "visible": false
           }
        ]
  });
});

Answer 4

For anyone using server-side processing and passing database values into jQuery using a hidden column, I suggest "sClass" param. You'll be able to use css display: none to hide the column while still being able to retrieve its value.

css:

th.dpass, td.dpass {display: none;}

In datatables init:

"aoColumnDefs": [ { "sClass": "dpass", "aTargets": [ 0 ] } ] // first column in visible columns array gets class "dpass"

//EDIT: remember to add your hidden class to your thead cell also

Answer 5

You can try as below to hide/show dynamically runtime

Hide : fnSetColumnVis( 1, false, false );

Example: oTable.fnSetColumnVis(item, false,false);

Show : fnSetColumnVis( 1, true, false );

Example: oTable.fnSetColumnVis(item, false,false);

Here, oTable is object of Datatable.

Answer 6

if anyone gets in here again this worked for me...

"aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }]