AngularJS分页顺序仅影响显示的页面 [英] AngularJS Paging orderBy only affects displayed page

问题描述

有人能指出我正确的方向找出一种方法来解决分页和订单在Angular中一起工作的方式吗？

Can anyone point me in the right direction to figure out a way to fix the way paging and orderBy work together in Angular?

目前，我可以订购和页面data []的结果，但orderBy过滤器仅单独影响每个页面。

Currently, I can orderBy and page the results of the data[], but the orderBy filter only affects the each page individually.

例如，如果我按ID按相反顺序排序，第1页将列出10-1，而第2页将列出15-11，而不是从15开始并在第二页的末尾转到1.

For example, if I sort in reverse order by ID, page 1 will list 10-1, and page 2 will list 15-11, as opposed to starting with 15 and going to 1 by the end of the second page.

我有一个基本的小提琴 http://jsfiddle.net/ZbMsR/

I have a basic fiddle here http://jsfiddle.net/ZbMsR/

这是我的控制器：

function MyCtrl($scope) {
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.orderBy = "-appId";
    $scope.data = [
        {'appId': 1}, {'appId': 2}, {'appId': 3}, {'appId': 4}, {'appId': 5}, {'appId': 6}, {'appId': 7}, {'appId': 8}, {'appId': 9},{'appId': 10}, {'appId': 11}, {'appId': 12}, {'appId': 13}, {'appId': 14}, {'appId': 15}
];

    $scope.numberOfPages=function(){
        return Math.ceil($scope.data.length/$scope.pageSize);                
    };
}

//We already have a limitTo filter built-in to angular,
//let's make a startFrom filter
app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

以下是我的观点的相关部分

 <strong>Sort By:</strong> <a ng-click="orderBy = 'appId'; reverse=!reverse">Newest</a>
 <ul>
    <li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize | orderBy:orderBy:reverse">
        {{item.appId}}
    </li>
 </ul>

推荐答案

如果你有完整的客户端分页，那么你只需更改过滤器的顺序：

If you have complete client-side paging, then you can just change order of filters:

<li ng-repeat="item in data | orderBy:orderBy:reverse | startFrom:currentPage*pageSize | limitTo:pageSize ">

这是你的预期吗？

这篇关于AngularJS分页顺序仅影响显示的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！