ajax - ngtable server side pagination

Question

Hello I try figure out how make server side pagination with angularjs an ngtable.

I have two web services:

localhost:8080/app/api/period Method GET return json list of entities. As parameters are passed page number, range of start period and range when it stop.

localhost:8080/app/api/period/count Method GET return count of periods. As parameters are passed range of start period and range when it stop.

    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);
                });
        }
    });

Table params.total isn't updated corectly so data in table are displayed but pagination buttons aren't visible.

Could anybody explain me how to use $http.get inside of success listener of other $http.get in this case to get correctly setted params.total.

score 8 · Accepted Answer

您看不到分页按钮，因为您的 get() 可能会返回 10 进行计数，因为服务器端的“rangeStart”、“rangeStop”限制，如果您返回 10 个结果中的 10 个结果，则没有什么可以分页的。

您可以为每个请求返回 10 个结果，但 params.total 应该始终是所有结果的计数。

无论如何，当您可以像这样将它返回时，您不需要 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

祝你好运

score 4 · Accepted Answer

您是否尝试使用#ngTasty 服务器端分页？

这要容易得多。

http://zizzamia.com/ng-tasty/directive/table-server-side

score 0 · Accepted Answer

看看缺点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;
        });
      }
    });
  }

ajax - ngtable server side pagination

3 回答 3

Related

Reference