columnDefs - visible false not working

ignignokt

I'm assuming I am missing something very simple. I am using a combination of server-side, row grouping, and responsive. I'm not sure what the link to your hosted responsive JS file is so I couldn't make a DT live or JS Fiddle of this. But basically everything initially loads as expected besides column Ten being hidden. I've tried changing {data:"Ten"} to {data:"Ten",visible:false} as well which does not work.

Also, I ran table_blah.column( 10 ).visible( false ); and noticed instead of hiding the column, it sticks the column into the responsive "+" button which seems like it is either a bug, or there should be a way to hide a column and it not be put under the responsive menu. In addition to that, the grouped row headers also create a "+" which definitely has to be a bug.

Any help would be appreciated. Thanks!

var table_blah = $('#blah_table').DataTable({
        columnDefs:[
            {visible:false,targets:10}
        ],
        order: [[ 10, 'asc' ]],
        columns:[
            {data:"Zero"},
            {data:"One"},
            {data:"Two"},
            {data:"Three"},
            {data:"Four"},
            {data:"Five"},
            {data:"Six"},
            {data:"Seven"},
            {data:"Eight"},
            {data:"Nine"},
            {data:"Ten"}
        ],
        responsive: true,
        processing: true,
        serverSide: true,
        aLengthMenu: [[25, 50, 75, -1], [25, 50, 75, "All"]],
        iDisplayLength: 25,
        ajax: "/mypath/tostuff",
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null;
 
            api.column(10, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group_blah"><td colspan="9">'+group+'</td></tr>'
                    );

                    last = group;
                }
            } );
        }
    } );
 
    // Order by the grouping
    $('#blah_table tbody').on( 'click', 'tr.group_blah', function () {
        var currentOrder = table_blah.order()[0];
        if ( currentOrder[0] === 10 && currentOrder[1] === 'asc' ) {
            table_blah.order( [ 10, 'desc' ] ).draw();
        }
        else {
            table_blah.order( [ 10, 'asc' ] ).draw();
        }
    } );

allan

If you are using Responsive, then Responsive will decide the columns visibility state. If you don't want the data from a specific column to ever be shown then you can use the never class - see the Responsive documentation.

Allan

ignignokt

Thank you very much allan. I saw the responsive example but never noticed the entire responsive documentation section that goes with it; I was too focused on thinking there was an issue with my row grouping implementation or something else. Everything makes much more sense now.