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

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

Answer 2

主要问题是混合通过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（）使用ng-table参数提供$ resource。例如{page：＆＃34; 1＆＃34;，count：＆＃34; 10＆＃34;}

如何分页动态AngularJS表？

2 个答案: