FixedHeader with fixed footer - How to un-fix footer on smaller displays?

Nick Hope

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.

Nick Hope

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.

colin

There are a couple of things going on there. First, it's a boolean, not a string, plus it can't accept function so you'll need to just supply the value, something like this:

    fixedHeader: {
      header: true,
      footer: window.innerHeight > 800? true : false
    }

Colin

Nick Hope

Thank you Colin. That works! I'd kind of realised both those things you mention but didn't know how to resolve it.