角度智能表分页跳过答案

【问题标题】：Angular smart-tables Pagination skipping角度智能表分页跳过
【发布时间】：2015-09-28 07:08:36
【问题描述】：

编辑已修复：关于使用此模块通过 ajax 加载数据并进行排序、过滤和分页工作有一个不相关的注释。与 99.9% 的使用对象数组的示例相比，它需要额外的步骤。如果你已经让它像这样工作，那就更糟了，因为你假设智能表可以处理所有事情。没有。

原问题：

谁能帮我弄清楚为什么表格在第 2 页和第 4 页上跳过了。我创建了一个 plunker 并使用了大量的 cmets，如果你在控制台中观看它会显示流入的数据和被过滤掉。排序和搜索工作，“过滤”数组中有数据，我可以通过搜索甚至排序找到第 2 页和第 4 页的数据，但不能通过单击第 2 页或第 4 页。

http://plnkr.co/edit/LVDvjjO6NGGjlBBQEIed?p=preview

这是没有评论疯狂的工厂：

app.factory('mongodbApi', function($http, $q, $filter) {

    // CAN ADD OTHER APIs HERE TO TEST OUTSIDE OF
    // EXPRESS.JS

    // GET
    var getRecords = function(url, start, number, params) {
        var defer = $q.defer();

        $http.get(url)
            .success(function(res) {
                var filtered = params.search.predicateObject ? $filter('filter')(res, params.search.predicateObject) : res;

                if (params.sort.predicate) {
                    filtered = $filter('orderBy')(filtered, params.sort.predicate, params.sort.reverse);
                }
                result = filtered.slice(start, start + number)
                    // why is this skipping 5 items? 
                defer.resolve({
                    data: result,
                    numberOfPages: Math.ceil(res.length / number)
                });
            })
            .error(function(err) {
                defer.reject(err);
            });

        return defer.promise;
    };

    return {
        getRecords: getRecords,
    };
});

【问题讨论】：

标签： angularjs ajax pagination

【解决方案1】：

The OP wrote in an edit:

我通过在 st-pagination div 上设置 'st-items-by-page="5"' 来修复它。请继续阅读，因为它比这更复杂一些。

所以当我单击第 2 页时，我的索引“开始”变量增加了 10，当我单击第 3 页时设置为 20。根据源默认值：
pagination: {
  template: 'template/smart-table/pagination.html',
  itemsByPage: 10,
  displayedPages: 5
}
我认为通过将我的开始设置为 0 并将我的 tableState.pagination.number 设置为 5，智能表会知道我想要每页 5 个项目并且确实如此，但它不会相应地增加开始索引值。你实际上必须平衡价值观。这可能应该在文档中更新。并不需要花很长时间才能弄清楚，但我已经在这个模块上搞砸了几个星期了。

关于 AJAX 调用的注意事项

对于任何对使用 ajax 感兴趣的人，您必须在您的表上使用 st-pipe 指令。当您执行任何操作、排序、过滤或更改页面时都会调用它，它将从服务器获取最新数据。根据 ajax/pipe 部分下的文档，您可以了解如何完成 99% 的工作。请注意，您将在 tableState.search 和 tableState.sort 上设置 $filter，并将结果切片从您的 ajax 承诺传回。就像我在这里写的那样，你必须平衡 tableState 值。

再次，itemByPage 是您要返回到表的数组上的索引，即从哪里开始显示，tableState.pagination.number 是每页将显示的行项目，即显示多少。

对于某些人来说，这可能是平淡无奇的一天。经验丰富的程序员，尤其是 Angular 方面的程序员可能会一笑置之。老实说，我在 2 个月前“学习”了 Angular。玩得开心快乐的 ajaxing，使用 plunker 并查看控制台。

希望对您有所帮助。

【讨论】：