JS、DataTableの：HTMLテーブルは完全に私は、HTML、ブートストラップやjqueryのDataTableのを使用して大規模な（> 1000行）、テーブルをレンダリング私のWebアプリケーションでは

Question

をロードするまで、すべての行が最初にロードされている...

<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> 

を待ちますAjaxは使用されず、すべての検索/フィルタ操作はクライアントでデータテーブルによって提供されます。

テーブルは応答性が高く、データテーブルによって正しくフォーマットされています。ただし、ページが読み込まれるまでには数秒かかることがあります。また、データ型のjavascriptはまだトリガされていないので、テーブルはHTMLがロードされるまでフォーマットされていないと応答しません。

私が欲しいもの

は、HTMLが完全にロードされるまで、テーブルを非表示にし、その間にロード画像を表示します。

css display noneなしでこれを行います。これは、JavaScriptのサポートなしでブラウザに表を表示したいからです。私は、私は2つのdiv要素にロードするイメージのためのテーブルと第二を保持しているものを作成し

みました何

...ウィンドウがロードされた後

が

<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> 

は、私はテーブルと画像とショーのdivを隠します...

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

これは機能します。それにもかかわらず、データテーブルは破損しています。これは適切なブートストラップ列には適合せず、他の要素の上に伸びています。さらに、テーブルは反応せず、ウィンドウサイズの変更に反応しません。

私を助けることができますか？

Answer 1

すべてのサイズ変更後に関数を呼び出すことができます 高さ $（ '。dataTables_scrollBody'）。css（ 'height'、get_the_right_height）; 幅の場合 $（ '＃your_table'）。dataTable（）。fnAdjustColumnSizing（）;