FixedHeader with fixed footer - How to un-fix footer on smaller displays?
FixedHeader with fixed footer - How to un-fix footer on smaller displays?
Nick Hope
Posts: 48Questions: 12Answers: 1
in FixedHeader
I am using fixed headers with fixed footers. Because my footer is quite deep, I would like to fix it on larger displays and un-fix it on mobile.
I have tried a few things without success. This code should convey what I'm trying to achieve.
$(document).ready(function() {
var table = $('#example').DataTable( {
paging: false,
fixedHeader: {
header: true,
footer: function(){
if(window.innerHeight > 800){
return 'true';
} else {
return 'false';
}
}
}
} );
} );
Here's an example: http://live.datatables.net/foherewu/1/edit
I actually can't even work out how to dynamically change an option between true and false. I've tried 1 and 0. I've also tried setting window.innerHeight as a variable outside the function and passing it in.
This question has an accepted answers - jump to answer
Answers
I should add that I did also try hiding the whole of the footer's
table.fixedHeader-floatingbut the problem is there is no class on the footer table to differentiate it from the header. I tried selecting it with:nth-of-type()but the order of the header and footer changes depending if the header is fixed or not when the page is refreshed.There are a couple of things going on there. First, it's a
boolean, not astring, plus it can't accept function so you'll need to just supply the value, something like this:Colin
Thank you Colin. That works! I'd kind of realised both those things you mention but didn't know how to resolve it.