0

私のページに問題があります。jQuery テーブルでユーザーに表示したいコンテンツがたくさんあります。ただし、ページがロードされている間、テーブルにはすべての行が表示され、ページの長さは 10 (およびページネーション) ではなく 10000 行になります。

したがって、すべてのデータをロードするまでテーブルを非表示にしたいと思います (おそらくそこにロードイメージを配置します)。

これどうやってするの？

4

4 に答える 4

1

私は通常、スタイル「display:none」をターゲット コンテナーに適用します。その後、.load() 関数を使用し、コールバックを使用して、データで満たされたコンテナーを表示できます。

基本的 ：

$('#target').hide();
$('#target').addClass("loading-layer");
$('#target').load('toto.php',function(){
    $('#target').removeClass("loading-layer");
    $('#target').show();
});

編集

今朝、ロード後にのみデータテーブルを表示しようとしましたが、その方法で実行できます。

    <div id="data-container" class="hidden">
        <table id="table-courses" cellpadding="0" cellspacing="0" border="0" class="display  ex_highlight data-table table-font" >
            ...
        </table>
    </div>

<script type="text/javascript">
    $(document).ready(function() {        
        $('#data-container').show();
        //Data table creation     
        oTable = $('#my-table').dataTable({                       
            "bJQueryUI": true
        });  
    });
</script>
于 2012-09-18T19:22:26.010 に答える
0

テーブルを非表示にして、最初 (または読み込み中) にブラウザーによってレンダリングされないようにする必要があります。

<table id="data" style="display:none;">

(これにより、js を使用しないユーザーがページを使用できなくなることに注意してください。

<script type="text/javascript"><![CDATA[
    document.write("<style>hidden { display:none; }</style>");
]]></script>
<table id="data" class="hidden">

次に、テーブルがロードされるとすぐに ( onDOMready)、いくつかの列を動的に削除し、その後残りを表示できます。

$(document).ready(function() {
// wait for images and other included objects to load, use
// $(window).load(function() {
    var table = $("#data");
    table.startPageViewer(); // or whatever

    table.show();
    // or, respectively:
    table.removeClass("hidden");
});

また、テーブル全体を動的に作成し、特に非同期で並列に実行する場合に、読み込みを高速化する短い (HTML 以外の) 形式でデータを提供することもできます。

ところで：ページネーションについて言及しました-すべてのデータを同時にロードするよりもはるかに優れています。

于 2012-09-18T19:21:33.553 に答える
0

FOUC (Flash of Unstyled Content) に閉じ込められたと思います。

これを克服する一般的な方法は、テーブルを含む div を次のように設定することです。

可視性: 非表示; DOM がブラウザで処理されている間、一度完了したら

ドキュメントの準備ができたら、div を再表示します

$('#customtabs').css('visibility','visible');

この例を見ることができます

于 2012-09-18T20:12:04.233 に答える
0

http://jsfiddle.net/jklm313/hfUSg/1/ 次を使用して、ページの読み込み後に本文から「display: none」を含むクラスを削除します。

$("window").load(function() {
  $("body").removeClass("preload");
});

JavaScript が無効になっているブラウザの場合:

<noscript>
    <style>        
        .preloader {display: block;}
    </style>
</noscript>
于 2012-09-18T20:00:36.953 に答える