動的AngularJSテーブルをページする方法は？

Question

ng-table-dynamicと$ httpでページ分割を行うにはどうすればよいですか？テーブルの

HTMLの仕様は

<table class="table-bonds table table-bordered table-hover table-striped" 
    export-csv="csv" 
    separator="," 
    show-filter="true" 
    ng-table-dynamic="bondsTable.bondsDataParams with bondsTable.bondsDataCols"> 
<tr ng-repeat="row in $data"> 
    <td class="hand" 
     ng-repeat="col in $columns">{{::row.node[col.field]}}</td> 
</tr> 

あるテーブルを作成するコードは次のとおりです。

self.bondsDataParams = new NgTableParams({ 
    page: 1, // show first page 
    count: 5 // count per page 
    }, { 
    filterDelay: 0, 
    total: 0, 
    getData: function (params) { 
     return $http(bondsDataRemote).then(function successCallback(response) { 
     // http://codepen.io/christianacca/pen/mJoGPE for total setting example. 
     params.total(response.data.nodes.length); 
     return response.data.nodes; 
     }, function errorCallback(response) { 

     }); 
    } 
    }); 

AngularJS 1.5.8

Answer 1

主な問題は、ajax経由でデータをロードしていて、リクエストのサーバー側でフィルタリング/ページネーションをサポートしていないことです。

テーブルがフィルタ処理できるように、またはサーバー側でページ付け、並べ替え、フィルタリングを完全にサポートするように、すべてのデータを前もって提供してください。

オプション1.データを手前にロードします。私はデータセットがそれほど大きくないので、人々が並べ替えとダウンロードのフィルタリングのすべての順列を使用できるようにするのが最も簡単な方法のように思えたので、このオプションを使用しました。

合計値はここでは必要ありません。データはすべてロードされます。

var Api = $resource('/green-bonds.json'); 

// Or just load all the data at once to enable in-page filtering, sorting & downloading. 
Api.get({page: "1", count: "10000"}).$promise.then(function (data) { 
    self.bondsDataParams = new NgTableParams({count: 25}, { 
     dataset: data.results 
    }) 
}); 

または遅延読み込みデータAPIとセット合計を完全にサポートします。単にデータセットを設定するのではなく、getDataを使用します。

var Api = $resource('/green-bonds.json'); 

this.bondsDataParams = new NgTableParams({}, { 
    getData: function (params) { 
     return Api.get(params.url()).$promise.then(function (data) { 
     params.total(data.count); 
     return data.results; 
    }); 
    } 
}); 

注1：デフォルトでは、$ resourceはオブジェクトの場合は.get（）、配列の場合は.query（）を必要とします。 isArray：を参照してください。私はこれを動作させることはありませんでした。

注2：params.url（）は、$ resourceにng-tableパラメータを提供します。例えば{page： "1"、count： "10"}

Answer 2

Thisページネーションのための優秀なディレクティブです持っていますそれを見てください。それは多くのオプションと使いやすいです。