Large number of tables - initialization problems

MadBoyEvo

Link to test case:
Hi,

I'm using DataTables successfully in my projects. The problem I'm having starts when there are a lot of tables that need to be loaded and users start interacting with them before everything is loaded.

Here's a small version that shows a concept where the user adds tabs with multiple tables

• Small version: https://jsfiddle.net/MadBoy/52fhw61k/1/

Here's one with more data in it and if you load it and start switching tabs right away you will get errors from data tables about initialization.

• Bigger version: https://jsfiddle.net/MadBoy/a6dmp5eg/1/

This problem is even more visible on huge datasets or with lots of tables (it's not uncommon for me to have hundreds of tables smaller/bigger ones) and file sizes of 50MB (I use them locally).

Examples use HTML-based storing of data but the same thing happens if it's JavaScript-based (faster but still the problem exists).

Since DataTables have problems in general when they are stored on different tabs that responsiveness of DataTable is not working I am explicitly resizing all tables on a given tab when the user switches to a new tab which fixes some things but at the same time since it triggers on every tab change user has to wait for it to load, as if they click too fast they get an error about initialization.

try {
    // Initially it was useed with ID, but if people use their own naming no tables were found
    //var table = document.getElementById(tab.id + "-Content").querySelectorAll('table[id^="DT-"]');
    var table = document.getElementById(tab.id + "-Content").querySelectorAll('table');
    table.forEach(resizeTable)
} catch (e) {
    console.log('No datatables available.');
}
function resizeTable(table) {
    try {
        $("#" + table.id).DataTable().columns.adjust().responsive.recalc();
        console.log('Resized table with id ' + table.id);
    } catch (e) {
        console.log('Failed to resize table with ' + table.id);
    }
}

Errors that I get:
DataTables warning: table id=DT-vYNNgAgn - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

Would you have some pointers on how to initially load only tables that are visible and how to prevent errors from when the tables are not yet loaded yet the user decides to push thru?

kthorngren

In you resize function:

function resizeTable(table) {
    try {
        $("#" + table.id).DataTable().columns.adjust().responsive.recalc();
        console.log('Resized table with id ' + table.id);
    } catch (e) {
        console.log('Failed to resize table with ' + table.id);
    }

Use $.fn.dataTable.isDataTable() verify the Datatable is initialized first, for example:
https://jsfiddle.net/n7w5e1cr/

Kevin

MadBoyEvo

This seems to work! I am wondering if it makes sense to resize tables all the time on tab switch or maybe I should just do it once (and save that it was resized). Do you think that it would still function?

I'm resizing it because some of the DataTables functionality (mainly responsiveness) is not loaded if DataTable is not visible when it happens. The problem is when the file has 50-200 tables on different tabs resizing them on each switch takes a long time and makes users "wait".

allan

You should only need to do it once per tab, when it is displayed the first time (unless something else on the page is allowing the tabs to be resized).

Allan