ngtable 服务器端分页答案

【问题标题】：ngtable server side paginationngtable 服务器端分页
【发布时间】：2016-04-15 15:20:30
【问题描述】：

您好，我尝试弄清楚如何使用 angularjs 使服务器端分页成为 ngtable。

我有两个网络服务：

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。

【问题讨论】：

标签： ajax angularjs pagination ngtable

【解决方案1】：

您看不到分页按钮，因为您的 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);
                });
        }
    });

其中$http.get('/app/api/period/count') 返回像1234 这样的记录总数

祝你好运

【讨论】：

感谢您的回答，但计数服务返回所有期间的正确数量，并且不是 10 或更少，这可能会导致隐藏按钮。问题在于 jquery promise 对象和我处理它的方式。最近我通过手动分页和默认的角度模板来做到这一点。您关于返回所有期间并从返回的数组中获取长度的建议并不是非常有效的解决方案。懒人模式更适合我。
@bmlynarczyk 仔细看看上面暗黑破坏神的回答。他不建议从服务器获取所有结果并使用数组长度属性。相反，他建议返回具有两个属性的 json 对象。 results 属性将保存数组（页面），总数（无长度）将保存服务器计数（）。如果可能，您只需要登录服务器端即可。
@clarethis 我同意。暗黑破坏神的答案被我错误地解释了。

【解决方案2】：

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

这样更容易。

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

【讨论】：

【解决方案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;
        });
      }
    });
  }

【讨论】：