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.
