I have problem with setting Datatables columns visibility. My code sets right value to column visibility but does nothing after that, never shows "done"
https://jsfiddle.net/s06e0d60/1/ Here is example that works on JSFiddle but some way doesn't work on my computer
var table = ...
var tabVis = $('.toggle-vis');
console.log("checking first checkbox");
var checked = tabVis[0].checked;
console.log("finding column");
var column = table.column(0);
console.log("assigning value");
column.visible(checked);
console.log("done");
Similar code in another place works perfectly
$(document).ready(function () {
var table = $('#myTable').DataTable({
scrollX: "100%",
scrollY: '50vh',
scrollCollapse: true,
paging: false,
fixedColumns: true,
select: {
style: 'multi'
},
columnDefs:
[
{
targets: [0],
orderData: [0, 1, 2]
},
{
targets: [1],
orderData: [1, 2, 0]
},
{
targets: [2],
orderData: [2, 0, 1]
}
],
language: {
"url": "//cdn.datatables.net/plug-ins/1.10.12/i18n/Polish.json",
select: {
rows: {
_: "Wybrano wierszy: %d",
0: "Kliknij wiersz aby go zaznaczyć"
}
}
}
});
$('.toggle-vis').on('change', function (e) {
//e.preventDefault();
var source = event.target || event.srcElement;
// Get the column API object
var column = table.column($(this).attr('dataColumn'));
// Toggle the visibility
column.visible(source.checked);
});
});
SOLVED
I changed column().visible(x) function to column().visible(x, false) which prevents recalculating column layout and everything magically started working.