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 HopeNick Hope Posts: 48Questions: 12Answers: 1

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

  • Nick HopeNick Hope Posts: 48Questions: 12Answers: 1

    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.

  • colincolin Posts: 15,177Questions: 1Answers: 2,590
    edited June 2022 Answer ✓

    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 HopeNick Hope Posts: 48Questions: 12Answers: 1

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

Sign In or Register to comment.