DataTables - Responsive hiding columns on large screens - datatables

Question

I have a problem with DataTables - I want to use the responsive add-on to hide columns on smaller screen sizes, unfortunately the responsive add-on is hiding columns on larger screen sizes when it really doesn't need to.
Here is my javascript code:
var table = $('#peopleTable').DataTable({
responsive: true,
ajax: {
dataType: 'text',
type: 'POST',
url: apiUrl,
dataSrc: function (json) {
return $.parseJSON(json);
}
},
columns: [
{
data: 'name',
responsivePriority: 1,
width: '5%',
render: function (data, type, row) {
return '<img class="icon" title="' + row.people_type + '" src="<?php echo $localPath; ?>/webimg/people-type/b/' + row.people_type_id + '.png">' + row.main_contact + ' # ' + row.name + '';
}
},
/*{
data: 'main_contact',
responsivePriority: 1,
width: '5%'
},*/
{
data: 'add1',
responsivePriority: 1,
width: '5%',
render: function (data, type, row) {
var output = [];
if (row.add1) { output.push(row.add1); }
if (row.add2) { output.push(row.add2); }
if (row.add3) { output.push(row.add3); }
if (row.town) { output.push(row.town); }
var outputStr = output.join(', ');
return '<span class="address-trunc" title="' + outputStr + '">' + outputStr + '</span>';
}
},
{
data: 'phone',
responsivePriority: 1,
width: '5%'
},
/*{
data: 'email',
responsivePriority: 1,
width: '5%',
render: function (data, type, row) {
return '' + row.email + '';
}
},*/
{
data: 'id',
orderable: false,
responsivePriority: 1,
width: '5%',
render: function (data, type, row) {
var url = '<?php echo $localPath;?>/people/person.php?id=' + row.id;
return 'View '
<?php if ($activeUser->can('delete')) { ?>
+ 'Delete'
<?php } ?>
;
}
}
]
});
As you can see I have been playing about with the code in order to make all the columns appear on a large screen size.
When I started off I had more columns in play (they are now commented out), I had all the widths adding up to 100%, and I have all the responsivePrioritys set to correct values (instead of them all being 1).
Reducing the number of columns, setting lower widths, altering responsivePrioritys - doing all of these things had no effect, on a large screen the responsive add-on was still insisting on hiding at least 1 column.
How do I stop this? I still want to use the add-on as it is very useful on smaller screens, but I don't want it force the hiding of columns when it doesn't need to.
To show you what is happening, here is a screen shot - you can see the huge almost-empty columns where there is plenty of room for another column - and yet DataTables is insisting on hiding a column behind the + symbol on the far left.

Answer 1

Responsive extension has many classes to configure when columns should be visible/hidden.
You could use desktop class to specify columns shown for window width greater than or equal to 1024 px.
See this example for code and demonstration.

Answer 2

Why not just use
var table = $('#peopleTable').DataTable({
responsive: window.innerWidth < 1000 ? true : false,
...
})
I mean simply not initialize the responsive extension when it is not needed. 1000 is just a suggestion, "larger screen sizes" is relative :)
demo -> http://jsfiddle.net/8vtqsf7z/