Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting default columns hidden using DataTable ColVis extension

Tags:

datatables

How can I provide a list of columns I want hidden on table load through the ColVis extension?

Also, is there a way to retrieve the list of columns currently visible/hidden?

like image 604
eComEvo Avatar asked Jul 15 '15 23:07

eComEvo


2 Answers

Specify visible columns

You can set visibility with columnDefs or columns options to target specific columns along with columns.visible option to set column visibility.

For example, to hide a second column initially, use the following options:

var table = $('#example').DataTable({
    'columnDefs': [
       { targets: 1, visible: false }
    ]
});

See this jsFiddle for demonstration.

Get a list of visible columns

You can get a list of visible columns bu using columns().visible() method.

var colVisible = table.columns().visible();

See this jsFiddle for demonstration.

like image 132
Gyrocode.com Avatar answered Oct 29 '22 09:10

Gyrocode.com


The ColVis extension gives no method to hide columns on load. That is .Datatable() job to do.

To get the list of columns which are visible/hidden you can do something like this

var length = myTable.columns().nodes().length,
    result = [];
for(var i=0;i<length;i++){
    result.push(myTable.column(i).visible());
}
console.log(result);

Here is a demo http://jsfiddle.net/dhirajbodicherla/189Lp6u6/25/

like image 23
Dhiraj Avatar answered Oct 29 '22 07:10

Dhiraj