JS, Datatables: wait until HTML table fully loads

Question

In my webapp I render a large (> 1000 rows) table using html, boostrap and jquery datatables...

<script type="text/javascript">  
  $(document).ready(function () {
    var table_tab = $('#tab').DataTable({ ... });
  });
</script>

<table id="tab" class="table responsive table-striped table-bordered" width="100%">
  <?php foreach... ?>
</table>

All rows are loaded at the first time, no ajax is used, and all search / filter operations are provided on the client by datatables.

The table is responsive and is correctly formatted by datatables. However, it takes a while (few seconds) until page is loaded. And because datatables javascript is not triggered yet, table displays unformatted and inresponsive until its html is loaded.

What I want

Hide the table until html is fully loaded and display a loading image in the meantime.

Do this without css display none, because i want the table to be shown in a browser without javascript support.

What I tried

I created two divs one that holds the table and second for the loading image...

<div id="details_tab">
  <script type="text/javascript">$("#details_tab").hide();</script>
  <table id="tab" class="table responsive table-striped table-bordered" width="100%">
    ...
  </table>
</div>
<div id="loading_tab" class="jsonly">
  <div class="text-center vspace-20 bmarg-20">
    <img src="./images/loader.gif" width="40px" /><br/>
    <big>Loading data...</big>
  </div>
</div>

After window is loaded I hide image and show div with table...

$(window).load(function() {
  $("#details_tab").show();
  $("#loading_tab").hide();
});

It works. Nevertheless, the datatable is damaged. It doesn't fit to a proper bootstrap column and is stretched over other elements. Moreover the table isn't responsive and doesn't react to window size change.

Can you help me?

Answer 1

in DataTable you can add "initComplete": function(){the code to show the table or else}

Answer 2

You can call a function after every resize for height $('.dataTables_scrollBody').css('height', get_the_right_height); for width $('#your_table').dataTable().fnAdjustColumnSizing();