Question

你好我试着弄清楚如何使用angularjs使服务器端分页成为可用的。

我有两个网络服务：

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.get来正确设置params.total。

Answer 1

你没有看到分页按钮，因为你的＆＃34; rangeStart＆＃34;，＆＃34; rangeStop＆＃34;你的get（）可能会返回10来计数。在服务器端限制，如果你从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);
                });
        }
    });

其中$http.get('/app/api/period/count')返回1234

等记录总数祝你好运

Answer 2

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

这样更容易。

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

Answer 3

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

ngtable服务器端分页

3 个答案: