ajax - ngtable服务器端分页

标签 ajax angularjs pagination ngtable

您好,我尝试弄清楚如何使使用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

最佳答案

您看不到分页按钮,因为由于服务器端的“rangeStart”,“rangeStop”限制,您的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);

而且您也不需要总计,因为您可以从Seerver获得总计,因此请删除:
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
祝你好运

关于ajax - ngtable服务器端分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24106464/

相关文章:

php - 使用 jquery ajax 和 PHP 浏览器 'back button' 的工作

javascript - Angular JS - Bootstrap 模式 ENTER 按键有两个按钮,只有一个可见

Jquery 数据表 - 所选行突出显示在第二页中不起作用

php - Codeigniter 分页链接按降序/倒序排列?

php - 用于产品页面评论的 Ajax 分页的 SEO?

javascript - 在 Ajax 中同时传递 Json 对象和字符串值

javascript - 通过ajax post发送两个数组

javascript - Jquery验证: if input has specific value : error

javascript - 自耕农 : angular-fullstack-generator cannot find module 'babel-runtime/helpers/interop-require-default'

javascript - 如果数组中已存在 id 则隐藏特定的 ng-option