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

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