Show/hide multiple columns at once

Show/hide multiple columns at once

dylanmacdylanmac Posts: 49Questions: 7Answers: 1
edited January 2014 in DataTables 1.9
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.

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    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
  • dylanmacdylanmac Posts: 49Questions: 7Answers: 1
    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?
  • dylanmacdylanmac Posts: 49Questions: 7Answers: 1
    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(), {
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    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
  • robgnycrobgnyc Posts: 1Questions: 0Answers: 0
    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 );
    }

    }
This discussion has been closed.