Datatable: Visible option doesn't work when Ajax call to render data - datatables

Question

I have a table is using datatable and Ajax to get data on load.
const oTable = $('#product').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "/ajax/admin/getproductlist/ajax.php",
"type": "POST"
},
"responsive": true,
"columnDefs": [
{
"targets": [-1],
"searchable": false,
"orderable": false
},
{
"targets": [1, 9, -2],
"width": "5%",
},
{
"targets": [1, -1],
"width": "10%",
},
{
"targets": [0, 2, 5, 6, 7, 8],
"width": "15%",
},
{
"targets": [3, 4],
"width": "30%",
"orderable": false, << This worked
"visible": false << DOESN't work
}
],
"columns" : [
{ "data": "sku" },
{ "data": "master" },
{ "data": "thumbs", "orderable": false }, << This worked
{ "data": "name", "orderable": false }, << This worked
{ "data": "name_fr", "visible" : false }, << DOESN't work
{ "data": "product_tags", "orderable": false }, << This worked
{ "data": "brand_tags", "orderable": false }, << This worked
{ "data": "label_tags", "orderable": false }, << This worked
{ "data": "mer_tags", "orderable": false }, << This worked
{ "data": "status", "orderable": false }, << This worked
{ "data": "quantity_in_stock" },
],
"initComplete": function(settings, json) {
$('#dataTables-list-Product_filter input').unbind();
$('#dataTables-list-Product_filter input').bind('keyup', function(e) {
if (e.keyCode == 13) {
oTable.search(this.value).draw();
}
});
$('#dataTables-list-Product_filter input').bind('change', function(e) {
oTable.search(this.value).draw();
});
},
});
I want to hide the columns when table finishes loading.
Let's take an example for name_fr. I tried to add visible: false to config option but somehow this column always shows up again after page stop loading. The orderable: false works fine.
I did add break point to debug the process. When table initialized, this column was hidden but after that something called it showing up again.
The column was only hidden when I click on checkbox that I make a function to show/hide.
$('input[id^="toggle_vis_"]').on('click', function(e) {
var column = oTable.column($(this).attr('data-column'));
$(this).val() == 1 ? column.visible(false) : column.visible(true);
});
So, I tried to but this to ready() function to hide column when page loaded.
$(document).ready(function() {
var column = oTable.column(4);
column.visible(false);
});
And...it didn't work as well. :(
Would you please give me an idea how can I solve this problem?

Answer 1

Thank you #andrewjames to help me find out my problem.
There was a conflict between orderable: false and responsive: true.
The option responsive: true brought back my columns when finishing loading.
Solution: Remove or edit responsive to false
var oTable = $('#Product').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "/ajax/admin/getproductlist/ajax.php",
"type": "POST"
},
...
...
"responsive": false,
...
...
});
Cheers.