Table broken when using js data source with scroller inside inactive nav tab

chrisu

JSfiddle demo w sample behavior: https://jsfiddle.net/fr6w7qbv/

Debugger code: emukub

On a page I have bootstrap nav tabs, and the table json datasource comes from another function so I am not loading with ajax:{} parameters, and I'm using scroller.

When the datatable loads on the active tab panel, it works fine, but when the datatable loads on an inactive panel not being shown, it results in an empty table with "Showing NaN to X of X entries" ( with scrollCollapse: true, it displays "Showing NaN to -Infinity of X entries").

Ajax data source seems to work fine with scroller on an inactive tab, it just seems to be an issue when using a js data source

Thanks,
Chris

chrisu

I should also note that the js data source on an inactive tab works fine when not using scroller.

jr42.gordon

Try calling the function below after the tab that contains the DataTable becomes active. dt is the var attached to your DataTable. The timeout may be necessary to allow all animations to complete before drawing table.

prettyTable: function(timeout) {
        (function() {
                dt.columns.adjust().draw();
        }).delay(timeout || 100);
}

jr42.gordon

Also, on the basic example for scroller it reads, "Deferred rendering (deferRender) should be used when Scroller is enabled to gain the speed benefits offered by Scroller."

Based on this, I don't think you need to use it.

chrisu

Thanks for the suggestion, I actually already had this function

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    $('div.active table').each(function() {
        if ($.fn.DataTable.fnIsDataTable(this) && $(this).css('display') != 'none')
            $(this).DataTable().columns.adjust().draw();            
    });
});

and it works great for fixing the weird column width problems on tables with ajax sources on inactive tabs, but it doesn't fix the no rows issue with js data source. I tried your function too and it was the same results as this one above.

jr42.gordon

https://jsfiddle.net/fr6w7qbv/13/

I modified your example a bit, I was able to have both tables look good and proper data.

chrisu

Thanks for all your help! I also asked on Stack Overflow and another use pointed me to the scroller.measure which also fixes the issue: https://jsfiddle.net/fr6w7qbv/10/