Datatables & Bootstrap tab

baba_13

Hi!
I made a page with two bootstrap tabs and one datatable in each tab.

I initialized both tables with

    $('#idTable1').DataTable( {
         dom: 'frtip',
        "bProcessing": true,
        "pageLength": 50,
        "sAjaxSource": "extractDbTable1.php",
        "aoColumns": [ { mData: 'column_name' } .....   ]
     } );

   $('#idTable2').DataTable( {
         dom: 'frtip',
        "bProcessing": true,
        "pageLength": 50,
        "sAjaxSource": "extractDbTable2.php",
        "aoColumns": [ { mData: 'column_name' } .....   ]
     } );

ExtractDb script retrieves data from a mysql database and because the result of both queries is very heavy,
the page takes a bit of time to load.
Postpone the initialization of each table only when the corresponding tab is active can be a remedy to optimize the times?
Or is there any other solution?

Thank you very much!

kthorngren

This FAQ may help to get you started:
https://datatables.net/faqs/index#General-initialisation

You will likely use deferRender but I m not sure how it works with tabbed tables.

Kevin

allan

Postpone the initialization of each table only when the corresponding tab is active can be a remedy to optimize the times?

That is certainly an option I would look into. Use the shown event from Bootstrap to trigger the initialisation of the second table.

Also use deferRender as Kevin says.

I would suggest you don't mix the old Hungarian style options with the new ones as well. e.g. sAjaxSource should be ajax, etc.

Allan