Using Responsive on small screen and Fixed columns on large screen on the same table ?
Using Responsive on small screen and Fixed columns on large screen on the same table ?
Carluccio
Posts: 8Questions: 3Answers: 0
in Responsive
Hi there.
I trying to use the responsive feature and fixed columns on the same table depending on the screen size.
I have tried the code below with no luck. Do you think is it possible?
I know I can always create 2 separate tables, and displaying one depending on the screen size, but it’s not ideal.
Thanks for your help.
$(document).ready(function() {
$(window).on('resize', function() {
isSmallWindow = $(this).width() < 768;
if(isSmallWindow) {
$('#example').DataTable( {
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.childRowImmediate,
type: 'none',
target: ''
}
}
} );
}else {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: true
} );
}
});
} );
This question has an accepted answers - jump to answer
Answers
In the approach you've taken there you would need to destroy the DataTable on each
resizeevent. Then you can reinitialise it with the features you want.I haven't actually tried mixing the two together before - I tend to see them as orthogonal to each other, but I can see that it might be useful. We'll need to dig into this some more.
Allan
Thanks, I’ll try