ngtable 服务器端分页

Question

ngtable 服务器端分页

ajaxangularjspaginationngtable

6

你好，我正在尝试使用AngularJS和ngtable实现服务器端分页。

我有两个Web服务：

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

- bmlynarczyk

3个回答

4

您尝试过使用 #ngTasty 服务端分页功能吗？

它要简单得多。

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

- zizzamia

0

看一下下面的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;
        });
      }
    });
  }

- user6207717

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Diablo · Accepted Answer

您看不到分页按钮，可能是因为您的“rangeStart”、“rangeStop”限制在服务器端返回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

祝好运