web-dev-qa-db-ja.com

jQuery DataTables-開始が遅い、「通常」のHTMLテーブルが最初に表示される

私はjQuery DataTableプラグインを使用していますが、スクリプトのロードに時間がかかるように思われるので、私のWebページには常に通常のhtmlテーブルが最初に表示され、すべてのスクリプトが完了すると、テーブルはDataTableになります。このような見た目は受け入れられないと思いますので、アドバイスをいただければ幸いです。スクリプトを高速化できるかどうか、またはプレーンテーブルを前に表示しないかどうか。ところで、_Layout.cshtmlヘッドタグの_Scriptsパーシャルビューからスクリプトを呼び出しています

 @Html.Partial("_Scripts")

（更新）テーブルを非表示にして、データテーブルの初期化後に表示しようとしましたが、テーブルヘッダーのないデータテーブルを取得しました。なぜこれが起こっているのですか？

$('#stocktable').hide();
// Initialize data table
    var myTable = $('#stocktable').dataTable({

        // Try styling
        "sScrollX": "100%",
        "sScrollXInner": "100%",
        "bScrollCollapse": true,

        // To use themeroller theme
        "bJQueryUI": true,
        // To use TableTool plugin
        "sDom": 'T<"clear">lfrtip',
        // Allow single row to be selected
        "oTableTools": {
            "sRowSelect": "single"
        },
        "fnInitComplete": function () {
            $('#stocktable').show();
        }
jqueryperformancedatatables
29
shennyL

[編集して追加：この古い回答は以前のDataTables APIを参照しています。 jQueryUIオプションは非推奨になり、置き換えの推奨事項は次のとおりです： https://datatables.net/manual/styling/jqueryui また、fnInitCallback（他のすべてのオプション）ハンガリー語表記を削除し、現在はinitCallbackです]

元の答えは次のとおりです：

私の注意点は、_Scriptsの部分ビューに慣れていないことです。そのため、以下のアドバイスは、「通常の」方法でJavaScriptを含めて呼び出すだけの人に与えるものです。

  1. プレーンHTMLテーブルにスタイルを設定して、ファイナルと同じ外観を共有します。 jQuery UIを有効にしている場合（_bJQueryUI: true_）、これは、DTが追加するのを待つのではなく、jQuery UIクラスを「プレーン」テーブルに置くことを意味します。

  2. さまざまなFOUC（スタイルのないコンテンツのフラッシュ）テクニックを使用して、レンダリングの準備ができるまでテーブルを非表示にします。 DataTables APIには、fnInitCallbackなどの「今すぐ表示」の部分に使用できる便利なコールバックがあります。最も基本的な（ただしアクセシビリティを損なう）手法は、display：noneを使用してテーブルのスタイルを設定し、コールバックで$('#myTable').show()またはいくつかのバリエーションを使用することです。インターネットで検索すると、アクセシビリティを維持する優れたソリューションが提供されます。

それ以外は、それは本当に（あなたが言うように） "許容できる"の許容範囲の問題です。サーバー側の処理（返されるレコードがはるかに少ない）、スクリプトの読み込み時間を短縮するためのスクリプトローダー（head.jsで実験中ですが、他にもあります）、およびスクリプトの最小化されたバージョンを使用します。これでも、DTになる前にプレーンテーブルが一瞬表示されることがありますが、インターネットユーザーは、要素が読み込まれる前にページが「構築」されるのを見慣れているため、許容できるトレードオフでした。あなたにとっては、そうではないかもしれません。

幸運を！

9
Greg Pettit

私はうまく機能する非常にシンプルなソリューションを実行しました。 DataTableの初期化では、show（）メソッドを使用しました。

$(document).ready(function() {
    $('#example').dataTable({
        "order": [[ 0, 'asc' ]]
    });
    $('#example').show();
} );

...そしてHTMLテーブルに私はスタイルdisplay：noneを入れました：

<table id="example" class="display" cellspacing="0" width="100%" style="display:none">

幸運を！

34
Alexandre Crivellaro

私も同じ問題を抱えていました。これを試して：

var dTable=$("#detailtable").dataTable({
        "bProcessing":true,
        "bPaginate":false,
        "sScrollY":"400px",
        "bRetrieve":true,
        "bFilter":true,
        "bJQueryUI":true,
        "bAutoWidth":false,
        "bInfo":true,
        "fnPreDrawCallback":function(){
            $("#details").hide();
            $("#loading").show();
            //alert("Pre Draw");
        },
        "fnDrawCallback":function(){
            $("#details").show();
            $("#loading").hide();
            //alert("Draw");
        },
        "fnInitComplete":function(){
            //alert("Complete");
        }
10
bmoran

@hanzoloの提案に基づく-これが回答としての私のコメントです（そして私のdataTableは次のようになります）：

var stockableTable = $('#stockable').dataTable({
      "bLengthChange": false,
      "iDisplayLength": -1,
      "bSort": false,
      "bFilter": false,
      "bServerSide": false,
      "bProcessing": false,
      "sScrollY": "500px",
      "sScrollX": "95%",
      "bScrollCollapse": true,
      // The following reduces the page load time by reducing the reflows the browser is invoking
      "fnPreDrawCallback":function(){
          $("#loading").show();
      },
      "fnDrawCallback":function(){
      },
      "fnInitComplete":function(){
          $("#details").show();
          this.fnAdjustColumnSizing();
          $("#loading").hide();
      }
  });
6
tamersalama

私の実用的な解決策は、「display：none」を使用せずにテーブルを非表示にする「ダーティ」なトリックです。通常の "display：none"スタイルでは、jQueryデータテーブルの初期化の問題が発生します。

まず、データテーブルをラッパーdivに配置します。

<div id="dataTableWrapper" style="width:100%" class="dataTableParentHidden">
...data table html as described in jQuery Data Table documentation...
</div>

CSS：

.dataTableParentHidden {overflow:hidden;height:0px;width:100%;}

このソリューションは、「display：none」を使用せずにデータテーブルを非表示にします。

データテーブルの初期化後、ラッパーからクラスを削除してテーブルを表示する必要があります。

$('#yourDataTable').DataTable(...);
$('#dataTableWrapper').removeClass('dataTableParentHidden');
2
Sasvári Tamás

たぶん、_Layout.cshtmlにスクリプトをロードするだけでよいと思います。パーシャルビューは、実際には、他の領域で再利用できるセグメント、または少なくともレンダリングされたHTMLコンテンツで使用できるセグメントを対象としています。

そうは言っても、簡単にできることの1つは、読み込みが完了するまでテーブルを非表示にするか、テーブルを非表示にして進行状況インジケーターを表示することです。

あなたは次のようなことをすることができます：

// .loadTable() is some function that loads your table and returns a bool indicating it's finished
//  just remember to check this bool within the function itself as it will be called over and over until it returns true

while (!loadTable()) {

    // maybe show a progress bar

    if ($('#myTable').css('display') != 'none')) {
        $('#myTable').hide();    // if it isn't already hidden, hide it
    }  
}

// hide progress bar
$('#myTable').show();

UDPATE：

JQueryテーブルプラグインに「成功」​​または「終了」のコールバックがある場合は、ページの読み込み時にテーブルを非表示にし、読み込みが完了したらそれを表示します。

$(document).ready(function () {
    $('#myTable').hide();

    // run plugin and .show() on success or finished 
});
1
Terry

これは、ColVisプラグインによるものです。 sDOMから「W」を削除すると、テーブルのレンダリングが飛ぶ（ドロップダウンなしのアルビエット）

0
Ross
  • 以下は、node.jsハンドルバーの例です。ただし、使用しているWebフロントエンドフレームワークを使用してデータをレンダリングできます。
  • bootstrapを使用している場合は、最初に非表示のクラスを使用してテーブルを非表示にするか、手動で要素を非表示にすることができます。
  • 次に、initCompleteコールバックでjQueryを使用して非表示のクラスを削除し、完全に読み込まれた後でのみテーブルを表示できます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">

<table id="stocktable" class="table hidden">
<thead>
  <tr>
    <th>Name</th>
    <th>Last Name</th>
    <th>Age</th>
    <th>Street Address</th>
    <th>State</th>
    <th>Country</th>
  </tr>
</thead>
<tbody>
  {{#each devices}}
    <tr id="{{id}}">
      <td>{{first_name}}</td>
      <td>{{last_name}}</td>
      <td>{{age}}</td>
      <td>{{street_address}}</td>
      <td>{{state}}</td>
      <td>{{country}}</td>
    </tr>
  {{/each}}
</tbody>
</table>

<script>
  $(document).ready(function() {
    $('#stocktable').DataTable({
      columns: [{
          person: 'first_name'
        }, {
          person: 'last_name'
        },
        {
          person: 'age'
        },
        {
          person: 'street_address'
        },
        {
          person: 'state'
        },
        {
          person: 'country'
        }
      ],
      initComplete: function() {
       // Unhide the table when it is fully populated.
       $("#stocktable").removeClass("hidden");
      }
    });
  });
</script>

例えば：

0
Ryan

私はそれが非常に古い質問であることを知っていますが、多分私は将来誰かを助けることができるかもしれません、どのように知っています...

      <html>
                <head>
                    <style>
                    .dn {
                         display: none;
                    }
                </style>
                </head>
                <body>
                        <div id="loadDiv" class="firstDivClass secondDivClass">Loading...<div>
                        <table id="myTable" class="dn firstTableClass secondTableClass">
                             <tr><td>Something Here</td></tr>
                        </table>
                </body>


            <script>
         $(document).ready(function(){
    showMeTheTabel();
    });        
    function shoMeTheTable() {
            var dTable = $('#myTable').dataTable({
                "aoColumnDefs": [
                   {bla, bla}
                ],
                "oLanguage": {
                    "bla" : "bla"
                },
                "fnPreDrawCallback":function(){
                },
                "fnDrawCallback":function(){
                    $("#loading").addClass('dn'); 
                    $('#tabel').removeClass('dn');
                },
                "fnInitComplete":function(){
                    console.log("Complete")           // optional and Done !!!
                }
            });
    }
    </script>
     </html>
0
Leonard Lepadatu