Datatables use of visible false not working

Question

I am using datatables and I try to have my 6th column to be hidden but it is not working. Strangely, it is working for the first and 7th columns.

Here is my code: HTML ID Domain Sub Domain technology Certification Name Rating Skill ID Jscript

var certificationTable;
certificationTable = $('#certificationTable').DataTable({
                serverSide: true,
                processing: true,
                stateSave: true,
                ajax: {
                        url: "{!! route('listOfUsersSkills',['1']) !!}",
                        type: "POST",
                        dataType: "JSON"
                    },
                columns: [
                    { name: 'skill_user.id', data: 'id', searchable: false , visible: false },
                    { name: 'skills.domain', data: 'domain', searchable: true , visible: true },
                    { name: 'skills.subdomain', data: 'subdomain', searchable: true , visible: true },
                    { name: 'skills.technology', data: 'technology', searchable: true , visible: true },
                    { name: 'skills.skill', data: 'skill', searchable: true , visible: true },
                    { name: 'users.name', data: 'name', searchable: true , visible: true },
                    { name: 'skill_user.rating', data: 'rating', searchable: false , visible: false },
                    { name: 'skills.id', data: 'skill_id', searchable: false , visible: false },
                    {
                        name: 'actions',
                        data: null,
                        sortable: false,
                        searchable: false,
                        render: function (data) {
                            ...
                        },
                        width: '70px'
                    }
                    ],
                order: [[5, 'asc'],[1, 'asc'],[2, 'asc'],[3, 'asc'],[4, 'asc']],
                lengthMenu: [
                    [ 10, 25, 50, -1 ],
                    [ '10 rows', '25 rows', '50 rows', 'Show all' ]
                ],
                dom: 'Bfrtip',
                buttons: [
                    {
                    extend: "colvis",
                    className: "btn-sm",
                    columns: [ 1,2,3,4,5,6,7 ]
                    },

                  {
                    extend: "pageLength",
                    className: "btn-sm"
                  },
                  {
                    extend: "csv",
                    className: "btn-sm",
                    exportOptions: {
                        columns: ':visible'
                    }
                  },
                  {
                    extend: "excel",
                    className: "btn-sm",
                    exportOptions: {
                        columns: ':visible'
                    }
                  },
                  {
                    extend: "print",
                    className: "btn-sm",
                    exportOptions: {
                        columns: ':visible'
                    }
                  },
                ],
                initComplete: function () {
                    var columns = this.api().init().columns;
                    this.api().columns().every(function () {
                        var column = this;
                        // this will get us the index of the column
                        index = column[0][0];
                        //console.log(columns[index].searchable);

                        // Now we need to skip the column if it is not searchable and we return true, meaning we go to next iteration
                        if (columns[index].searchable == false) {
                          return true;
                        }
                        else {
                          var input = document.createElement("input");
                          $(input).appendTo($(column.footer()).empty())
                          .on('keyup change', function () {
                              column.search($(this).val(), false, false, true).draw();
                          });
                        }
                    });
                    // Restore state
                    var state = certificationTable.state.loaded();
                    if (state) {
                        certificationTable.columns().eq(0).each(function (colIdx) {
                            var colSearch = state.columns[colIdx].search;

                            if (colSearch.search) {
                                $('input', certificationTable.column(colIdx).footer()).val(colSearch.search);
                            }
                        });

                        certificationTable.draw();
                    }
                }
            });

So the problem is that, the table is shoing the records fine and everything works except that as you can see, the column 0 and 7 are set to visible false and they are not showing but the column 6 is visible true and it is showing.

I tried also to make sure:

alert( 'Column is '+(certificationTable.column( 6 ).visible() === true ? 'visible' : 'not visible'));

And for column 0 and 7 it states in the alert not visible but when I do that for column 6, it states visible. It is as if the visible statement on column 6 is not setting it...

Strange thing is that I tried to change column 7 to visible but it didn't show and the alert was showing not visible even if I changed it. It is as if, it is keeping in memory the visible states of the columns set the first time.

Answer 1

I had a very similar problem with setting column visibility. After debugging through the whole init process in datatables, I realized that the last step was to load the saved state of the table. So, I set stateSave to false and voila, it worked!

My issue resulted from the timing of my changes. I had viewed all of the columns in the table before later adding the logic to make certain columns invisible on init. As such, the state of the table, which I believe is set in a browser cookie, had these columns explicitly set to be visible.

There is also a way to override the stateSave functionality through the stateSaveParams callback detailed here.

Not sure if it matters, but I'm using datatables version 1.10.18.

Answer 2

This is how I did and it worked for me ... trick was in columnDefs.

You can also refer to this url.. it has live examples

$(function () {
$("#demoGrid").DataTable({
    "processing": true, // for show progress bar
    "serverSide": false, // for process server side
    "filter": true, // this is for disable filter (search box)
    "orderMulti": false, // for disable multiple column at once
    "Paging": true,
    "PageLength": 20,
    "iDisplayLength": 20,
    "pagingType": "full_numbers",
    "ajax": {
        "url": "/controller/method",
        "type": "GET",
        "datatype": 'json',
        "data": 'data'
    },
    "autoWidth": false,
    "columnDefs":
           [
               {
                   "targets": [0],
                   "visible": false,
                   "searchable": false,
                   "width": "10px"
               },
               {
                   "targets": [1],
                   "visible": true,
                   "searchable": true,
                   "width": "10px"
               },
               {
                   "targets": [2],
                   "searchable": true,
                   "orderable": true,
                   "width": "40px"
               },
      ... other columns
                  {
                      "targets": [8],
                      "searchable": true,
                      "orderable": true,
                      "width": "40px",
                      "className": 'select-checkbox'
                  }

           ],
    "columns": [
                  { "data": "RowId", "name": "RowId", "autoWidth": true, "Visible": false },
                  { "data": "Domain", "name": "Domain", "autoWidth": true },... rest of code