DT v2 + responsive v3 issue when initialising a hidden table

geometry

Link to test case:

https://codepen.io/adamdilger/pen/JoPKQOE?

Debugger code (debug.datatables.net):

No debugger code

Error messages shown:

No error message

Description of problem:

When initialising a hidden table with the responsive plugin, when the table is made visible, the .dt-empty column has the wrong colspan attribute, making it look incorrect.

The issue I believe is in this line of the responsive plugin, which sets the colspan to 1 on init:

// If no records, update the "No records" display element
if (dt.page.info().recordsDisplay === 0) {
   $('td', dt.table().body()).eq(0).attr('colspan', visible); // <-- here
}

Our use case is we initialise a datatable in a bootstrap 3 tab which is hidden, when the tab is switched to the table looks off.

I did notice that version 2 of this plugin (when used with datatables v1) made the same calculation + attribute modification, but in the older versions the table had an empty body at this point, and thus no attribute change was made.
I believe this commit may have something to do with this, which adds in the empty row before the responsive plugin is initialised.

I suppose the question is, are we initialising the responsive plugin incorrectly, or is this visible count being incorrectly calculated.

Thanks! Let me know if there's anymore information you need me to get for you

kthorngren

You will want ot use columns.adjust() when the table becomes visible as shown in this example. In addition you will want to use responsive.recalc() for responsive.

Kevin