Show/hide multiple columns at once

dylanmac

I want to show/hide groups of columns based on filters (represented as links) next to my table. Each filter will be a JS array containing the column indices to display.

Any ideas how to do this?

PS. I assume on click of each filter I would hide all the table columns then selectively show the columns I want based on the values in the array. Not sure how best to do this, either.

allan

The ColVis plug-in now has the ability to show / hide groups of columns based on a single click: https://github.com/DataTables/ColVis (the 'group-columns' example). ColVis with this feature hasn't yet been released, but you can grab the it from git if you want. Otherwise, just loop over the columns to want to show and hide using fnSetColumnVis as needed.

Allan

dylanmac

This is great Allan, thanks. Is there a way to customize the buttons in such a way that they can render as tabs. Or, even better, can I attach the ColVis method to existing UI elements?

dylanmac

The "two tables with shared control" example seems like it might point the way. Unfortunately there is a JS error:

ReferenceError: ColVis is not defined

The line in question is below:
var oColVis = new ColVis( oTables.fnSettings(), {

allan

Not really - ColVis' disable can be manipulated by CSS a bit, but fundamentally its a button set, so it can be changed that much.

> can I attach the ColVis method to existing UI elements?

What I would suggest is that you simply use the API ( fnSetColumnVis ):

[code]
$('#showSet1').on('click', function () {
table.fnSetColumnVis( 0, true );
table.fnSetColumnVis( 1, true );
table.fnSetColumnVis( 2, false );
table.fnSetColumnVis( 3, false );
} );

$('#showSet2').on('click', function () {
table.fnSetColumnVis( 0, true );
table.fnSetColumnVis( 1, false );
table.fnSetColumnVis( 2, true );
table.fnSetColumnVis( 3, true );
} );
[/code]

Or if you fancy trying out the new API in DataTables 1.10:

[code]
var table = $('#myTable').DataTable(); // note the capital D to get the API instance
$('#showSet1').on('click', function () {
table.columns( [0, 1] ).visible( true );
table.columns( [2, 3] ).visible( false );
} );

$('#showSet2').on('click', function () {
table.columns( [0, 2, 3] ).visible( true );
table.columns( [1] ).visible( false );
} );
[/code]

Allan

robgnyc

I'm also trying to accomplish the hiding of multiple columns. I'm adapting the standard show/hide code with a loop to hide multiple items.

I'm using the following code and it's only hiding the first item.

function fnShowHide()
{
/* Get the DataTables object again - this is not a recreation, just a get of the object */


var oTable = $('#closing').dataTable();
for(var i = 9; i <= 25; i++) {
var bVis = oTable.fnSettings().aoColumns[i].bVisible;
oTable.fnSetColumnVis( i, bVis ? false : true );
}

}