JS, Datatables: wait until HTML table fully loads
<p>In my webapp I render a large (> 1000 rows) table using html, boostrap and jquery datatables... </p>

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

&lt;table id="tab" class="table responsive table-striped table-bordered" width="100%"&gt;
  &lt;?php foreach... ?&gt;
&lt;/table&gt;
</code></pre>

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

<p>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.</p>

<p><strong>What I want</strong></p>

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

<p>Do this without <a href="https://stackoverflow.com/questions/9734021/jquery-hide-content-until-loaded">css display none</a>, because i want the table to be shown in a browser without javascript support.</p>

<p><strong>What I tried</strong></p>

<p>I created two divs one that holds the table and second for the loading image...</p>

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

<p>After window is loaded I hide image and show div with table...</p>

<pre><code>$(window).load(function() {
  $("#details_tab").show();
  $("#loading_tab").hide();
});
</code></pre>

<p>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.</p>

<p>Can you help me?</p>