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](https://datatables.net/forums/uploads/userpics/758/nM4RTALDKRK7R.jpg)
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-floating
but 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.