web-dev-qa-db-ja.com

DataTablesプラグインを使用したサーバー側のページネーション

サーバーはページごとに15レコードを返し、合計レコードは2000を超えています。最初の15レコードを表示し、[次へ]ボタンをクリックするたびに残りのすべてのレコードを表示します（ページごとに15）。このために、サーバー側のページネーションまたはクライアント側を実行しますか？

DataTables のページネーションに使用しているテーブルと属性は次のとおりです。

  var tableData = self.accountCollection.getData();

        var tableColumns = this.accountCollection.getColumns();
        var totalRecs = this.accountCollection.length;

        //create the UI grid containing the list of items

        this.resultsTable = tableEl.dataTable( {
            "bServerSide": true,
            "sEcho": 3,
            "iTotalRecords": totalRecs,
            "iTotalDisplayRecords": 15,
            "aaData": tableData,
            "aoColumns": tableColumns,
            "aaSorting": [[1,'asc']],
           });



getData: function () {

        var returnData = [];
        $.each(this.models, function (idx, accountModel) {
            returnData.Push(accountModel.attributes);
        });
        return returnData;
    },

returnDataは、テーブルに入力するフィールドを持つオブジェクトを返します。

返されるオブジェクト（大体）：

Object
 accountName: "No Company"
 address1: "1234 asdf"
  address2: ""
  billingAcctId: null
  billingSystem: null
  city: "mountain view"
  comments: null
   country: "USA"

次に、getData（）関数が呼び出され、以下を使用してデータベースからデータを返します。

var tableData = this.accountCollection.getData()

したがって、基本的にtableDataには、テーブルに表示するために必要なフィールドと値があります。サーバーから1000以上のレコードが返されるようになりました。したがって、ページネーションが必要でした。

フィドルの1つは私が試したものであり、パジナチンには何の影響もありません。

私はDataTablesに付属する基本的なページネーションを持っていると思いますが、サーバーサイドが必要で、一度に15レコードだけを表示し、「次へ」ボタンと「前へ」ボタンをクリックするとページごとに15の残りのレコードを取得するためにajax呼び出しを行います。

これがあなたの理解を深めるのに役立つことを願っています。詳細が必要な場合はお知らせください。

DataTablesを使用してページネーションを達成するにはどうすればよいですか？

ありがとう

jquerydatatablepagination
11
user1234

enter image description here

ページネーションは、次の最小限の変更を実行するために必要なレコードを表示します。

「iTotalDisplayRecord」はフィルタリングされたレコードの合計になります

4
Pranav Labhe

これはあなたの路地を検索します-> http://datatables.net/examples/data_sources/js_array.html それは純粋にクライアント側です

ただし、私が知る限り、実際のページネーション（一度にデータベースから15レコードだけをフェッチするため、高速化）を達成する唯一の方法は、サーバー側でajaxすることです（つまり http ：//datatables.net/examples/data_sources/server_side.html ）

あなたがそうしているように私には見えません。 self ... accountCollection.getData（）がajaxコールバックである場合を除き、DataTableをインスタンス化する場合は、「aaData：tableData」ではなく「ajax：tableData」を使用する必要があります。

データテーブルとやり取り/初期化するために使用するデータテーブルAPIと、データテーブルが返すJSONを混同している可能性があります。

申し訳ありませんが、それは少し笑でしたが、それは理にかなっていますか？

1
Jake Zieve