web-dev-qa-db-ja.com

データテーブル-ページの読み込み時に特定の量の行のみを読み込む方法

[〜＃〜] url [〜＃〜] にajaxを作成し、テーブルをレンダリングする fiddle がありますが、実行中に10行だけ延期してロードしたいページの読み込み。

HTML

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Account ID</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
</table>

JS

$(document).ready(function() {

$('#example').DataTable( {
        "bPaginate": true,
        "processing": true,
        "bServerSide": true,

        ajax: {
            url: 'https://api.myjson.com/bins/1egsx',
            dataSrc: 'data'
        },
        columns: [
            { data: 'account_id' },
            { data: 'name' },
            { data: 'email' }
        ],
        "deferRender": true,
        "deferLoading": 10,

    } );

});

私は取得し続けました

該当する記録が見つかりません

javascriptjqueryhtmldatatables
12
kyo

TL; DR：クライアント側の処理でdeferRenderを使用する必要があります[〜＃〜 ]または[〜＃〜]deferRenderなしのサーバー側の処理（JSONデータの修正による）。この回答は、サーバー側の処理が必要であることを前提としています。

deferLoading

サーバー側の処理を正しく使用する場合、デフォルトの動作では、ajaxリクエストごとに1ページの行数のみを送信します。 deferLoadingを使用する必要はないはずです-これが何をするかです（ document here から）：

サーバー側の処理を使用する場合、DataTablesのデフォルトの操作モードは、テーブルに現在存在するデータを単に破棄し、サーバーに要求してデータの最初のページを表示することです。空のテーブルではこれで問題ありませんが、データの最初のページが既にプレーンHTMLで表示されている場合は、リソースの無駄です。そのため、このオプションは、DataTablesにその最初の要求を行わないように指示するために存在します。むしろ、既にページにあるデータを使用します（並べ替えなどは適用されません）。

すべてのデータはajaxから取得されるため、このオプションは選択しないでください。

deferRender

サーバー側の処理を正しく使用している場合は、deferRenderも使用する必要はありません。 deferRenderの意志（それは ここのドキュメント から）：

これを説明する一例として、10,000行すべてのデータセットをロードし、ページング表示の長さが10レコードのみで、10,000行すべてを作成するのではなく、遅延レンダリングが有効な場合、DataTablesは10のみを作成します。

ここで重要なフレーズに注意してください。

10,000行のデータセットを読み込む場合

サーバー側の処理を正しく使用している場合は、1回の読み込みで1ページあたりの行数のみを読み込む必要があります。 deferRenderは、クライアント側の処理を使用するときにデータテーブルを高速化するオプションです。サーバーサイドの処理は、すでにdeferRenderが行うことを処理します。 DataTablesからこの画像を参照してください [〜＃〜] faq [〜＃〜] データテーブルを高速化する方法について：

enter image description here

クライアント側でのみdeferRenderを強調することに注意してください。ここで注意すべき点は、行がたくさんない場合（数万行以上）は、おそらくサーバー側の処理を使用する必要がないことです。

サーバーサイド処理を正しく使用する：

あなたの問題はおそらく、あなたのAPIがサーバー側の処理のために適切な形式のJSONを返していないという事実に起因しています。表示するデータだけでなく、より多くの情報を送信する必要があります。 ドキュメントページ に完全な説明が記載されています（必ずお読みください）が、以下の基本事項の概要を説明します。

リクエスト

APIに送信されるリクエストには、対処する必要があるデータが含まれます。

drawは、要求と応答のペアのセットを追跡する一意の識別子です。応答の値は、要求の値と一致する必要があります。これが、データテーブルがリクエストとレスポンスを照合する方法です。

startは、応答の最初のレコードを表します。ページごとに10個のレコードを表示しており、ページ2にある場合、startは10に等しいため、応答では10〜19の番号のレコードのみを送信します。

lengthはこの描画の予想される行数を表すため、ページ2のページあたり10レコードの上記の例では、lengthは10になります。これは、返されるレコードの数です。 。この値は、Datatables初期化のlengthMenuまたはpageLengthオプションに基づいています。 （それぞれ here および here に文書化）

忘れられることが多い重要なことは、lengthと同じ行だけを送信することです。最初のリクエストですべての行を送信しないでください。

応答

応答も変更する必要があります。基本的に、単にdataを返すのではなく、次の例のようなオブジェクトを返す必要があります（その ドキュメントページ から）：

{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        [
            "Angelica",
            "Ramos",
            "System Architect",
            "London",
            "9th Oct 09",
            "$2,875"
        ],
        [
            "Ashton",
            "Cox",
            "Technical Author",
            "San Francisco",
            "12th Jan 09",
            "$4,800"
        ],
        ...
    ]
}

追加のデータに注意してください：通常のdrawに加えて、recordsTotal、recordsFiltered、およびdata。サーバーサイド処理を使用する場合、これらはrequiredオプションです。

drawは、APIに対して行われたリクエストに対応する番号を表します。 GETリクエストにはdraw値もあり、GETの値は応答の値と一致する必要があります。

recordsTotalは、すべてのページにわたるテーブル内のレコードの総数を表します。ここで、recordsFilteredは、GET要求によって設定されたフィルタリング要件を満たすレコードの数を表します（フィルタリングがない場合は、 recordsTotalと等しくなければなりません。

これらは返信に最低限必要な要素ですが、オプションの値の詳細については、リンクされたドキュメントをご覧ください。

サイドノート

補足として。 DataTablesバージョン1.10以降を使用している場合、bServerSideはserverSideであり、bPaginateはpagingでなければなりません。

8
Chris H.

iDisplayLengthでもできます：

$('#example').DataTable( {
        "aLengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]],
        "iDisplayLength": 10,
        "bPaginate": true,
        "processing": true,
        "bServerSide": true,

        ajax: {
            url: 'https://api.myjson.com/bins/1egsx',
            dataSrc: 'data'
        },
        columns: [
            { data: 'account_id' },
            { data: 'name' },
            { data: 'email' }
        ],

    } );
4
Sanzeeb Aryal

ここでの意図は、ページが読み込まれるとすぐにDataTableを表示することだと思います。以下に、要件に応じて部分的なデータをロードする2つの方法を説明します。ボタンをクリックするなどのイベントをトリガーすることで、データ全体を後から読み込むことができます。どちらの場合も、データ全体がダウンロードされてローカルに保存され、トリガーされたイベントに基づいてロードして、データ全体をフェッチするための別の呼び出しを避けることができます。

ケース1：ソースから部分的なデータのみをダウンロードする場合

DataTableがデータを処理する前に、データ全体が「 https://api.myjson.com/bins/1egsx 」から取得されます。 URLから部分的なデータのみを取得する場合は、AJAXインタラクティブモード（readyState = 3）でデータを解析し、最初の10エントリを受け取った後に停止するカスタム関数を作成し、次に、データをマッサージして、それをDataTableの入力データとして渡します。

var inputData = '';
function loadDataTablePreview() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 3 && this.status == 200) {
        inputData += this.responseText;
        // Count the number of closing '}'. If its 10, lets start processing our data
        // Get the index of 10 closing '}'
        // Create a substring of inputData
        // append ']}'
        // Now JSON Decode
        var decodedData = JSON.parse(inputData);
        // Now create an instance of the DataTable passing this data as the input data 
        $('#example').DataTable( {
          "bPaginate": true,
          "processing": true,
          "bServerSide": true,
          data: decodedData,
          columns: [
            { data: 'account_id' },
            { data: 'name' },
            { data: 'email' }
          ],
        });
    }
    else if (this.readyState == 4 && this.status == 200) {
       // JSON Decode the data and store it to load later
    }
  };
  xhttp.open("GET", "https://api.myjson.com/bins/1egsx", true);
  xhttp.send();
}

$(document).ready(function() {
  loadDataTablePreview();
}

ケース2：データ全体をダウンロードした後、最初の10エントリのみをロードする

DataTableを表示する前に、データ全体をダウンロードしても問題ないと仮定して、以下に示すようにdataSrcの関数を作成できます。これにより、テーブル内の10エントリのみが表示されます。オプションで、JSON全体をブラウザーのデータストア（sessionStorageなど）のこの関数に保存し、JS関数をトリガーして、後からJSON全体を読み込むことができます。

$(document).ready(function() {

  $('#example').DataTable( {
    "bPaginate": true,
    "processing": true,
    "bServerSide": true,
    ajax: {
        url: 'https://api.myjson.com/bins/1egsx',
        dataSrc: function ( json ) {
                    // Store entire data in sessionStorage
                    // return the first 10 entries only for now
                    return json.data.slice(0,10);
                 },
    },
    columns: [
        { data: 'account_id' },
        { data: 'name' },
        { data: 'email' }
    ],
  });
});
2
Raghav Tandon