Buttons Colvis Ajax

ctechuk

Afternoon all,

I am getting to grips with Buttons and Colvis. I am trying to hide some columns on loading. I have seen several suggestions simplest being to hide the column using colmns in the DataTable definition. This doesn’t seem to work, what am I doing wrong? Colvis works perfectly and gives persistent state during sessions, all I need to do is load each page with some columns already hidden.

Any help greatly appreciated, I would set up a jsfiddle but I haven’t got to grips with it yet and will spend more time getting the setup correct. On a side note any useful tips on uploading live examples would also be greatly appreciated.

A

Code Below:

manageProductTable = $('#manageProductTable').DataTable({
        'ajax': myurl,
        'stateSave': true,
        'columns': [
            {"data": null, "class": "details-control", "orderable": false, "defaultContent": "", "width": "2%"},
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            { "visible": false, "class": "my_class"  }
            ],
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print', 'colvis'
        ],
        'order': []
    }); 

<table id="manageProductTable" class="display" style="width:100%" >
                    <thead>
                        <tr>
                            <th>Details</th>
                            <th style="width:10%;">Image</th>                       
                            <th>Image Number</th>
                            <th>Medium</th>
                            <th>Price</th>                          
                            <th>Quantity</th>
                            <th>Artist</th>
                            <th>Category</th>
                            <th>Status</th>
                            <th style="width:15%;">Options</th>
                            <th>Sold Client Name</th>
                            <th>Sold Date</th>
                        </tr>
                    </thead>
                <!--    <tfoot>
                        <tr>
                            <th></th>
                            <th>Product Media</th>
                            <th>Product Date</th>
                            <th>Product Dimensions</th>
                            <th>Product Client name</th>
                            <th>Product Date Sold</th>
                        </tr>
                    </tfoot>
                -->
                </table>

kthorngren

I'm guessing the problem is with StateSave. When the state is loaded it might not have been hidden so it becomes visible. Try commenting out the StateSave option and does the column become hidden?

One option might be to force the column to be hidden in initComplete. For example:

    initComplete: function () {
      var api = this.api();
      api.column(11).visible(false);
    }

Kevin

colin

If Kevin's suggestion doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin