Show/hide multiple columns at once
Show/hide multiple columns at once
dylanmac
Posts: 49Questions: 7Answers: 1
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.
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.
This discussion has been closed.
Replies
Allan
ReferenceError: ColVis is not defined
The line in question is below:
var oColVis = new ColVis( oTables.fnSettings(), {
> 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
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 );
}
}