6

こんにちは、angularjs を使用してサーバー側のページネーションを ngtable にする方法を考えてみます。

2 つの Web サービスがあります。

localhost:8080/app/api/periodメソッドGETは、エンティティの json リストを返します。パラメータとして、ページ番号、開始期間の範囲、停止時の範囲が渡されます。

localhost:8080/app/api/period/countメソッドGETが返す期間のカウント。パラメータとして、開始期間の範囲と停止時の範囲が渡されます。

    this.tableParams = new ngTableParams({
        page: 1,
        count: 10
    }, {
        counts: [10],
        total: 0,
        getData: function($defer, params) {
            $http.get('/app/api/period', {params: {
                pageNumber:params.page() - 1,
                rangeStart:rangeStart,
                rangeStop:rangeStop}})
                .success(function(data, status) {

                   params.total($http.get('/app/api/period/count', {params: {
                        rangeStart:rangeStart,
                        rangeStop:rangeStop}}));

                   $defer.resolve(data);
                });
        }
    });

テーブルparams.totalが正しく更新されないため、テーブル内のデータは表示されますが、ページネーション ボタンは表示されません。

この場合、正しく設定されるために$http.get、他の成功リスナーの内部で使用する方法を誰かに説明してもらえますか。$http.getparams.total

4

3 に答える 3

8

サーバー側の「rangeStart」、「rangeStop」の制限により、おそらく get() が count に対して 10 を返し、合計 10 のうち 10 の結果を返す場合、ページネーションするものがないため、ページネーション ボタンは表示されません。

リクエストごとに 10 件の結果を返すことができますが、params.total は常にすべての結果の数である必要があります。

とにかく、このように1回で返すことができる場合、2回のget()呼び出しは必要ありません:D

{
    "results": [
        {
            "id": "1437",
            "task_started_at": "2014-06-09 12:25:25",
            "task_finished_at": "2014-06-09 12:25:25"
        },
        {
            "id": "1436",
            "task_started_at": "2014-06-09 12:26:31",
            "task_finished_at": "2014-06-09 12:26:31"
        }
    ],
    "total": 1027
}

コードは次のようになります。

params.total(data.total);
$defer.resolve(data.results);

また、サーバーから取得するため、合計は必要ありません。削除します。

total: 0;

最後に、2 つの get() 呼び出しを含むコードは次のようになります。

this.tableParams = new ngTableParams({
        page: 1,
        count: 10
    }, {
        getData: function($defer, params) {
            $http.get('/app/api/period', {params: {
                pageNumber:params.page() - 1,
                rangeStart:rangeStart,
                rangeStop:rangeStop}})
                .success(function(data, status) {

                   params.total($http.get('/app/api/period/count'));

                   $defer.resolve(data);
                });
        }
    });

where$http.get('/app/api/period/count')は次のようなレコードの総数を返します1234

幸運を

于 2014-06-27T10:42:03.000 に答える
0

欠点urlを見てください、これがあなたに役立つことを願っています:

var Api = $resource('/data');
    this.tableParams = new NgTableParams({
      page: 1, // show first page
      count: 10 // count per page
    }, {
      filterDelay: 300,
      getData: function(params) {
        // ajax request to api
        return Api.get(params.url()).$promise.then(function(data) {
          alert("1111");
          params.total(90);
          return data.results;
        });
      }
    });
  }
于 2016-04-15T06:44:46.483 に答える