Column Headers Disappear when hiding table until data is formatted when using scrollx and scrolly

vbprogrammer

When using display:none in table style and using initcomplete function to show table and having scrollX true and scrollY value set, the table loads as expected but the column headers are missing. If I remove scrollX and scrollY, then it works as expected but I need it to work with scrollX and scrollY enabled. Data is Client-Side provided.

new DataTable('#licenseTable', {
    processing: true,
    fixedColumns: {
      start: 3
    },
    //scrollCollapse: true,
    // scrollX: true,
    // scrollY: 450,
    searching: true,
    fixedHeader: true,

allan

If you have the table hidden during initialisation, it can't perform any width calculations. You need to call columns.adjust() when you make the table visible.

DataTables 2.2, which I plan to release next week, has a way to doing that automatically .

Allan

vbprogrammer

First: Thank you for your help! If it is easier to wait until you release the update, I am fine with that but here is what I have done...

i adjusted the code to add the table variable and then tried the columns.adjust and I get console errors stating : Query.Deferred exception: Cannot read properties of undefined (reading 'columns') TypeError: Cannot read properties of undefined (reading 'columns') and jquery-3.7.1.js:3793 Uncaught TypeError: Cannot read properties of undefined (reading 'columns').

Table HTML

<table id="licenseTable" class="table table-bordered table-striped table-hover table-responsive display nowrap" style="display: none; width: 100%">

Table JavaScript

//License History Table
  var tbl_licenseTable = new DataTable('#licenseTable', {
    //processing: true,
    fixedColumns: {
      start: 3
    },
    scrollCollapse: true,
     scrollX: true,
     scrollY: 450,
    searching: true,
    fixedHeader: true,
    lengthMenu: [10, 25, 50, 100, 250, 500, { label: 'All', value: -1 }],
    language: {
      lengthMenu: '_MENU_ License Records Per Page'
    },
    autowidth: false,
      columns: [null, null, null, {visible: false}, null, {type: 'num', className: 'dt-body-left'}, {type: 'date', className: 'dt-body-left'}, null, null, {visible: false}, {type: 'date', className: 'dt-body-left'}, {visible: false}, {type: 'date', visible: false, className: 'dt-body-left'}, {visible: false}, {width: '25px', orderable: 'false'}],
    layout: {
      topEnd: {
        search: {
          text: 'Search License Records'
        }
      },
      bottom1Start: {
          searchBuilder: {
            //Options go here
          }
        },
        bottom1End: {
          buttons: [
            {
              extend: 'colvis',
              text: 'Column Picker'
            },
            'copyHtml5',
            'csvHtml5',
            'excelHtml5',
            {
              extend: 'pdfHtml5',
              orientation: 'landscape'
            },
            'print'
          ]
        }
    },
    initComplete: function() {
      //$('#licenseTable').show();
      $('#licenseTable').css('display', 'block');
      tbl_licenseTable.columns.adjust().draw();      
    }
 
  })
  // End of License History Table

kthorngren

I think problem is you are trying to use the variable tbl_licenseTable in initComplete before the variable has been created. Try using this.api() instead, like this:

    initComplete: function() {
      //$('#licenseTable').show();
      $('#licenseTable').css('display', 'block');
      this.api().columns.adjust().draw();     
    }

Kevin

vbprogrammer

Thank you. That fixed the error in the console but the column headers are still not displayed. Other than that, the table displays as expected.

kthorngren

Right. When scrolling features are anabled Datatables clones the header, hides the original and creates a new table with the cloned header to enable the scrolling features. One option is to traverse the document to show this table. For example:
https://live.datatables.net/vuziyehe/1/edit

Kevin

kthorngren

A better option might be to hide the wrapping div. This way the Datatables elements like search and page length won't be visible until the div is displayed. Updated example:
https://live.datatables.net/pisoyema/1/edit

Kevin

vbprogrammer

And that fixed it completely!!!

Thank You!