动态角度表未通过分页进行过滤

Question

在另一个贡献者的帮助下，我有了一个动态的Angular表，它可以对表进行排序/过滤。 遵循今晚在另一篇文章中找到的示例，我能够添加分页，但是表过滤器仅在第一页上起作用。

我在想它与下面的表行代码有关，但是还不能缩小范围。

<tr class="paginationclass" ng-repeat="row in rows |
                                   orderBy:sort.type:sort.reverse |
                                   filter:searchData |
                                   pagination: curPage * pageSize |
                                   limitTo: pageSize">
    <td ng-repeat="column in cols">{{row[column]}}</td>
</tr>

对于任何我要去哪里的错误的指导，我将不胜感激。 谢谢！

小提琴

Answer 1

这是因为该过滤器将应用于整个集合，因此，如果您对其进行过滤，您将不能再拥有一页以上的页面，这就是为什么第二页为空的原因，请尝试回到第一页，您将看到您要搜索的元素。

我在过滤器输入上添加了ng-change指令，因此当项目少于pageSize时，它将修改实际页面。

我已经分叉了你的小提琴，这是：

https://jsfiddle.net/ignaciovillaverde/2rxg2e0y/3/

顺便说一句，您对“下一个”按钮的ng禁用条件无法正常工作，我对其进行了修改，请看一下并尝试一下。

Answer 2

您可以在此处观看$ scope。$ watch searchData过滤器。

 $scope.$watch('searchData',function(newValue , oldValue){
    $scope.rows = $filter("filter")(data,newValue);
        $scope.curPage = 0;
        $scope.numberOfPages = Math.ceil($scope.rows.length / $scope.pageSize);
    },true);

这是你的js

var data = [
    {"id" : "3", "name" : "Item 3", "cost" : "300"}, 
    {"id" : "1", "name" : "Item 1", "cost" : "100"}, 
    {"id" : "2", "name" : "Item 2", "cost" : "200"},
    {"id" : "6", "name" : "Item 6", "cost" : "600"}, 
    {"id" : "5", "name" : "Item 5", "cost" : "500"}, 
    {"id" : "4", "name" : "Item 4", "cost" : "400"}
];
angular.module('myApp', []).controller('myController', function ($scope,$filter) {
    $scope.sort = {
        type: 'id',
        reverse: false
    };
    $scope.searchData = '';
    $scope.rows = data;
    $scope.cols = Object.keys($scope.rows[0]);

    $scope.curPage = 0;
    $scope.pageSize = 3;
    $scope.numberOfPages =  Math.ceil($scope.rows.length / $scope.pageSize);

    $scope.$watch('searchData',function(newValue , oldValue){
    $scope.rows = $filter("filter")(data,newValue);
        $scope.curPage = 0;
        $scope.numberOfPages = Math.ceil($scope.rows.length / $scope.pageSize);
    },true);
}
);

ng-repeat =“行排| orderBy：sort.type：sort.reverse | limitTo：pageSize”

<div class="container" ng-app="myApp" ng-controller="myController">
    <div class="row">
        <div class="col-md-8">
            <form>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><i class="glyphicon glyphicon-filter"></i>
                        </div>
                        <input type="text" class="form-control" placeholder="Filter" ng-model="searchData" id="filterText" />
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <td ng-repeat="column in cols"> 
                                <a href="#" ng-click="sort.type = column; sort.reverse = !sort.reverse">
                                    {{column}}
                                    <span ng-show="sort.type == column && !sort.reverse" class="glyphicon glyphicon-arrow-down"></span>
                                    <span ng-show="sort.type == column && sort.reverse" class="glyphicon glyphicon-arrow-up"></span>
                                </a>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="paginationclass" ng-repeat="row in rows | orderBy:sort.type:sort.reverse | limitTo: pageSize">
                            <td ng-repeat="column in cols">{{row[column]}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- pagination buttons -->
    <div class="row">
        <div class="pagination pagination-centered" ng-show="rows.length">
            <ul class="pagination-controle pagination">
                <li>
                    <button type="button" class="btn btn-primary"
                            ng-disabled="curPage == 0"
                            ng-click="curPage=curPage-1"> &lt; PREV</button>
                </li>
                <li>
                    <span>Page {{curPage + 1}} of {{ numberOfPages }}</span>
                </li>
                <li>
                    <button type="button" class="btn btn-primary"
                            ng-disabled="curPage >= datalists.length/pageSize - 1"
                            ng-click="curPage = curPage+1">NEXT &gt;</button>
                </li>
            </ul>
        </div>        
    </div>
</div>

Answer 3

甚至更简单，只需添加以下内容：

$scope.$watch('searchData', function() { $scope.curPage = 0; });

因此，只要“ searchData”有任何更改，我们都会转到第一页。