FixedHeader does not take effect until the window is redrawn

tjtrabue

Hello, everyone,

Please forgive any ignorance on my part. I am rather new to jQuery, and especially to DataTables.

Here is my issue: I was able to create a new DataTable object, pass in all of the necessary parameters (including those needed for FixedHeader), and everything worked fine except for one little thing: the FixedHeader option on the DataTable does not work unless I mess with the table once the page loads. For example, if I use one of the sort buttons in the column headers to sort the table (thereby redrawing it in the window), then the FixedHeader works, but if I just load the page then the headers are not fixed (until I mess with the table). I have also noticed that if I change the browser window size then the FixedHeader will work.

Here is my jQuery code:

... //  other code
// Create a new DataTable with ID tableName
var dataTable = $("#" + tableName).DataTable({
  lengthMenu: [50, 100, 150],
  language: {
    search: '<i class="fa fa-filter fa-lg"></i>',
    searchPlaceHolder: "Filter Records",
  },
  order: [[3, 'desc']],
  fixedHeader: {
    headerOffset: 67
  }
});
... // code continues

Does anyone have any suggestions? I am really at my wits' end over this problem.

Thank you all so much for your time,

• Tom