动态Angular表没有分页过滤

Dynamic Angular table not filtering with pagination

本文关键字：分页 过滤 Angular 动态      更新时间：2023-09-26

多亏了另一个贡献者的帮助，我有了一个动态的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>

我很感激任何指导我在哪里做错了。谢谢!

小提琴

这是因为过滤器被应用到整个集合，所以如果你过滤它，你不能再有超过1页，这就是为什么第二页是空的，试着回到第一页，你会看到你正在搜索的元素。

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

我把你的小提琴叉开了，就在这儿:

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

顺便说一下，你的"下一步"按钮的ng禁用条件不正常工作，我已经修改了它，看看并尝试它

您可以监视$scope。$watch搜索数据过滤器在那里…

 $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="row in rows | 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>

或者更简单，只需添加以下内容:

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

所以只要有任何更改到'searchData'，我们就进入第一页

相关文章：