DataTable Fixed Header at page bottom (on first page load)

Question

I have a DataTable with FixedHeader option that has the following initialization populated in my $(document).ready function. Both the headerOffset values that are jquery looked-up and hard-coded at 40 have been attempted, with the same results.

    "fixedHeader": {
        // "headerOffset": $("#top-navbar").outerHeight()
        "headerOffset": 40
    },

The DataTable is populated from an ajax call and has a series of my own render: functions on half of the columnDefs but I don't think that's related.

I'm not sure why, but the first time the page is loaded, the fixedHeader doesn't follow the top of the screen - but is sitting at the very bottom of the page below the table. When I click refresh - the header works just fine.

Any thoughts? Thanks in advance.

Answer 1

I had the same problem, and in the absence of a satisfactory solution, my current workaround is to trigger a window resize event that will make the Datatable make rendering recalculations:

table.DataTable({

  // ...

  drawCallback: function() {
    $(window).resize();
  }

});