Resize Table once and only once on the Tabs switch ?.

Resize Table once and only once on the Tabs switch ?.

alexsunny123alexsunny123 Posts: 1Questions: 0Answers: 0

Hello,

Description of problem:
I use DataTables with Tabs where a lot of Tables aren't visible at first sight.

I've been using following code on tab switch and it works great.

Plain text
1
2
3
4
5
6
7
8
9
10
if ($.fn.DataTable.isDataTable("#" + table.id)) {
try {
$("#" + table.id).DataTable().columns.adjust().responsive.recalc();
console.log('Fitting table with id ' + table.id);
} catch (e) {
console.log('Failed to fit table with id ' + table.id);
}
} else {
console.log('Skipping fitting table id ' + table.id);
}
However it's a problem because it resize tables on each tab every single time the tab switch happens. What is more if I have nested tabs it will resize tables on tabs that have content that is not yet visible because the tab hasn't been pressed yet.

What more is that with very large number of tables on each tab switching tabs take a lot of time because it basically resizes them over and over and over again.

So I this idea that I would track whichever table was resized at least once, save it and whenever I see it again, I'll just skip it.

Plain text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
console.log("resize table started " + dataTablesInitializationTracker[table.id] + ' ' + table.id);
if (dataTablesInitializationTracker[table.id] !== 'initialized') {
if ($.fn.DataTable.isDataTable("#" + table.id))
try {
$("#" + table.id).DataTable().columns.adjust().responsive.recalc();
console.log("Fitting table with id " + table.id)
var tempTable = $("#" + table.id).DataTable();
var tableContainer = $(tempTable.table().container());
console.log(tempTable);
//console.log(table);
//console.log(tableContainer);
//console.log(tempTable.visible);
dataTablesInitializationTracker[table.id] = 'initialized';
}
catch (e) {
console.log("Failed to fit table with id " + table.id)
}
else
console.log("Skipping fitting table id " + table.id)
} else {
console.log("Already initialized table id " + table.id)
}
This is part of function: resizeTable(table).

The idea works correctly with everything except for nested tabs or generally tabs that are not yet visible but were already refreshed.

How would I be able to check if table is visible to trigger that save? I don't think it makes sense to initialize any table until it's visible on the screen. If it's nested in tab, or placed on tab that's not yet activated it makes no sense to initialize it and causing user to wait.

In code on codepen it starts on line 2797. The issue is mostly visible within 1st tab. If you switch to 2nd tab, go back to 1st tab you will notice the nested tab that's currently open will be properly displayed. If you click on 2nd nested tab it will show DataTable that is not really initialized (even tho it's marked as one).

Any easy way to go around it?

thanks
alexsunny

Replies

  • kthorngrenkthorngren Posts: 13,778Questions: 25Answers: 3,242

    This code from your first snippet will only adjust one table since the selector is an id:

    if ($.fn.DataTable.isDataTable("#" + table.id)) {
    try {
    $("#" + table.id).DataTable().columns.adjust().responsive.recalc();
    console.log('Fitting table with id ' + table.id);
    

    If this code is called more than once when switching tabs then you will need to look at the event handler to determine why its called more than once. In order to help we will need to see a link to your page or a test case showing the issue so we can see what the code doing.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

Sign In or Register to comment.