如何对动态 AngularJS table 进行分页？

Question

如何使用 ng-table-dynamic 和 $http 进行分页？

HTML table 的规格是

<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>

table创建代码为：

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

This 是一个很好的分页指令，看看它。它有很多选项并且易于使用。

Answer 2

主要问题是混淆了通过 ajax 加载数据并且在请求的服务器端不支持 filtering/pagination。

要么提供所有数据up-front，以便table进行过滤，要么完全支持服务器端的分页、排序和过滤。

选项 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 参数。例如{页数：“1”，计数：“10”}

如何对动态 AngularJS table 进行分页？

How to Paginate dynamic AngularJS table?

javascript

pagination

angularjs

ngtable