Find visible/active Tables only?

MadBoyEvo

I've following code: https://codepen.io/MadBoyEvo/pen/OJJXLVO

Basically I've the following code which is responsible for showing/hiding sections.

<script type="text/javascript">function show(obj) {
    document.getElementById(obj).style.display = 'block';
    document.getElementById("hide_" + obj).style.display = '';
    document.getElementById("show_" + obj).style.display = 'none';
    try {
        $('.dataTable').DataTable().columns.adjust().responsive.recalc();
    } catch {
        console.log('No datatables available.');
    }
}
function hide(obj) {
    document.getElementById(obj).style.display = 'none';
    document.getElementById("hide_" + obj).style.display = 'none';
    document.getElementById("show_" + obj).style.display = '';
}
</script>

When section starts as hidden and I press show without the responsive.recalc(); the table code doesn't load properly/fully. That's why I have added the code above and it seems to work. However, it's pretty heavy because if I have 50 tables it will recalc them all which is a bit unnecessary right? I was wondering if there's a way to find only visible data tables and do responsive.recalc()?

kthorngren

AFAIK Datatables would not know if its hidden or not and has no features to determine hidden state. Maybe you can use a class assigned to the tag to indicate it is visible. Then instead of $('.dataTable').DataTable().columns.adjust().responsive.recalc(); using the dataTable class you can use the dt-visible class.

Kevin

MadBoyEvo

So I would need to track tables myself. As in knowing which section holds which tables, or which tabs have which sections with which tables. That's the idea?

kthorngren

You have show() and hide() functions. I assume obj is a div or something that contains a table. You might be able to use something like jQuery find to find the descendent table in the show() function then use that class selector for adjusting the columns.

Here is a simple example that hides the Datatables inside a particular div on the click of a button. Note only the table is hidden not the search, etc elements. And the table in the other div is still visible.
http://live.datatables.net/tawuzedu/1/edit

Make sure to remove the class in your hide() function.

HTH,

Kevin

MadBoyEvo

Thanks