Datatables with a lot of columns how to force scrolling - datatables

Question

I am using datatables and I have like 20 columns. I tried to force scrolling horizontal but it is not working and it tries to draw the table without scroll in a single page without the scroll bar.
How can this be done?
I have (I removed already some columns):
activitiesTable = $('#activitiesTable').DataTable({
scrollX: true,
ScrollXInner: "200%",
ajax: {
url: "{!! route('listOfActivitiesPerUserAjax') !!}",
type: "POST",
},
columns: [
{ name: 'manager_id', data: 'manager_id' },
{ name: 'manager_name', data: 'manager_name', width: '150px' },
{ name: 'user_id', data: 'user_id' },
{ name: 'user_name', data: 'user_name' , width: '150px'},
{ name: 'project_id', data: 'project_id' },
{ name: 'project_name', data: 'project_name' },
{ name: 'year', data: 'year' },
{ name: 'jan_com', data: 'jan_com', width: '30px', searchable: false },
{ name: 'jan_otl', data: 'jan_otl', width: '10px', searchable: false },
{ name: 'feb_com', data: 'feb_com', width: '30px', searchable: false },
{ name: 'feb_otl', data: 'feb_otl', width: '10px', searchable: false },
{ name: 'mar_com', data: 'mar_com', width: '30px', searchable: false },
{ name: 'mar_otl', data: 'mar_otl', width: '10px', searchable: false },
{ name: 'apr_com', data: 'apr_com', width: '30px', searchable: false },
{ name: 'apr_otl', data: 'apr_otl', width: '10px', searchable: false },
{ name: 'may_com', data: 'may_com', width: '30px', searchable: false },
{ name: 'may_otl', data: 'may_otl', width: '10px', searchable: false },
{ name: 'jun_com', data: 'jun_com', width: '30px', searchable: false },
{ name: 'jun_otl', data: 'jun_otl', width: '10px', searchable: false },
{ name: 'jul_com', data: 'jul_com', width: '30px', searchable: false },
{ name: 'jul_otl', data: 'jul_otl', width: '10px', searchable: false },
{ name: 'aug_com', data: 'aug_com', width: '30px', searchable: false },
{ name: 'aug_otl', data: 'aug_otl', width: '10px', searchable: false },
{ name: 'sep_com', data: 'sep_com', width: '30px', searchable: false },
{ name: 'sep_otl', data: 'sep_otl', width: '10px', searchable: false },
{ name: 'oct_com', data: 'oct_com', width: '30px', searchable: false },
{ name: 'oct_otl', data: 'oct_otl', width: '10px', searchable: false },
{ name: 'nov_com', data: 'nov_com', width: '30px', searchable: false },
{ name: 'nov_otl', data: 'nov_otl', width: '10px', searchable: false },
{ name: 'dec_com', data: 'dec_com', width: '30px', searchable: false },
{ name: 'dec_otl', data: 'dec_otl', width: '10px', searchable: false }
],
columnDefs: [
{
"targets": [0,2,4,6], "visible": false, "searchable": false
}
],
order: [[2, 'asc']],
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();
});
}
});
}
});

Answer 1

Yes, the docs is a bit vague on this point. ScrollXInner (i.e sScrollXInner) was a legacy <1.10.x option no longer supported. In 1.10.x you must either :
Wrap the table into an element with a fixed width
<div style="width: 500px;">
<table id="example"></table>
</div>
http://jsfiddle.net/Lyje8wat/
or (less pretty) set the width of the .dataTables_wrapper element :
div.dataTables_wrapper {
width: 500px;
}
http://jsfiddle.net/s7hdqw29/
In both cases you will neeed to set scrollX :
var table = $('#example').dataTable({
scrollX: true,
...
})