如何对使用 UI Bootstrap Pagination 分页的 AngularJS 中的所有记录进行排序和过滤答案

【问题标题】：How to sort and filter all records in AngularJS that are paginated using UI Bootstrap Pagination如何对使用 UI Bootstrap Pagination 分页的 AngularJS 中的所有记录进行排序和过滤
【发布时间】：2016-05-23 05:07:37
【问题描述】：

我正在使用 angular ui-bootstrap pagination 进行客户端分页以将分页添加到列表中，然后我遇到了一个问题，即排序和过滤过程仅对当前页面中的数据进行排序和过滤.

这里是代码 sn-ps 在视图中显示数据：

<tr ng-repeat="reminderType in reminderTypes | filter: paginate | filter: searchText | orderBy:sortBy:sortDescending">
    <td>
        <a class="btn btn-sm btn-primary" ng-click="editReminderType(reminderType.ReminderTypeID)"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
        <a class="btn btn-sm btn-info" ng-click="detailsReminderType(reminderType.ReminderTypeID)"><i class="glyphicon glyphicon-eye-open"></i> View</a>
    </td>
    <td>{{reminderType.Name}}</td>
    <td>{{reminderType.EmailTemplate}}</td>
</tr>
...
<uib-pagination class="pagination-sm"
                        total-items="totalItems" max-size="maxSize" items-per-page="numPerPage" num-pages="numPages"
                        ng-model="currentPage" boundary-links="true" rotate="false"></uib-pagination>

这是控制器中用于分页的代码sn-ps：

$scope.maxSize = 3;
$scope.totalItems = 7;
$scope.currentPage = 1;
$scope.numPerPage = 2;
$scope.paginate = function (value) {
    var begin, end, index;
    begin = ($scope.currentPage - 1) * $scope.numPerPage;
    end = begin + $scope.numPerPage;
    index = $scope.reminderTypes.indexOf(value);
    return (begin <= index && index < end);
};

我也在 SO 上检查了这个 link，但它不起作用。如何使这项工作对整个页面的数据进行排序和过滤？

我已经在plnkr发布了完整的代码

【问题讨论】：

标签： javascript angularjs twitter-bootstrap pagination angular-ui-bootstrap

【解决方案1】：

由于某种原因，我无法分叉您的 plunkr，但这里有一个修复方法。 JS：

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PagerDemoCtrl', function($scope) {
  $scope.reminderTypes = [{"ReminderTypeID":1,"Name":"STAMPING OF SPA","EmailTemplate":null},{"ReminderTypeID":2,"Name":"CONDITION PRECEDENT","EmailTemplate":null},{"ReminderTypeID":3,"Name":"STATE AUTHORITY CONSENT","EmailTemplate":null},{"ReminderTypeID":4,"Name":"PAYMENT OF BALANCE PURCHASE PRICE","EmailTemplate":null},{"ReminderTypeID":5,"Name":"CKHT FILING","EmailTemplate":null},{"ReminderTypeID":6,"Name":"TRANSFER FORM 14A","EmailTemplate":null},{"ReminderTypeID":7,"Name":"TRANSFER NOTICE OF ASSESSMENT","EmailTemplate":null}]
  $scope.sortBy = 'Name';
  $scope.sortDescending = false;

  $scope.filteredRT = angular.copy($scope.reminderTypes);

  $scope.searchText = '';

  $scope.maxSize = 3;
  $scope.totalItems = 7;
  $scope.currentPage = 1;
  $scope.numPerPage = 2;
  $scope.paginate = function (value) {
    var begin, end, index;
    begin = ($scope.currentPage - 1) * $scope.numPerPage;
    end = begin + $scope.numPerPage;
    index = $scope.filteredRT.indexOf(value);
    return (begin <= index && index < end);
  };

  $scope.filter = function(){
    var results = $scope.filteredRT;
    results.length = 0;
    var searchText = $scope.searchText;
    var reminderTypes = $scope.reminderTypes;

    for(var i = 0; i < reminderTypes.length; ++i){
      if(searchText.length > 0){
        if(reminderTypes[i].Name.includes(searchText)){
          results.push(reminderTypes[i]);
        }
      } else {
        results.push(reminderTypes[i]);
      }
    }
    $scope.totalItems = results.length;

  }
});

还有 HTML

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="PagerDemoCtrl">
  <div class="row">
    <div class="col-md-offset-9 col-md-3">
        <p>
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
                <input type="text" class="form-control" placeholder="Enter Search Text"
                       ng-model="searchText" ng-change="filter()" />
            </div>
        </p>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <table class="table table-striped table-hover table-condensed">
            <thead>
                <tr class="bg-info">
                    <th></th>
                    <th>
                        <a ng-click="sortBy = 'Name'; sortDescending = !sortDescending">Reminder Type Name</a>
                        <span ng-show="sortBy == 'Name' && !sortDescending" class="glyphicon glyphicon-chevron-down"></span>
                        <span ng-show="sortBy == 'Name' && sortDescending" class="glyphicon glyphicon-chevron-up"></span>
                    </th>
                    <th>
                        <a ng-click="sortBy = 'EmailTemplate'; sortDescending = !sortDescending">Email Template</a>
                        <span ng-show="sortBy == 'EmailTemplate' && !sortDescending" class="glyphicon glyphicon-chevron-down"></span>
                        <span ng-show="sortBy == 'EmailTemplate' && sortDescending" class="glyphicon glyphicon-chevron-up"></span>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="reminderType in filteredRT | filter: paginate | orderBy:sortBy:sortDescending">
                    <td>
                        <a class="btn btn-sm btn-primary" ng-click="editReminderType(reminderType.ReminderTypeID)"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
                        <a class="btn btn-sm btn-info" ng-click="detailsReminderType(reminderType.ReminderTypeID)"><i class="glyphicon glyphicon-eye-open"></i> View</a>
                    </td>
                    <td>{{reminderType.Name}}</td>
                    <td>{{reminderType.EmailTemplate}}</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" class="text-right">
                        Showing page {{currentPage}} of {{numPages}}
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

<div class="row">
    <div class="col-md-12 text-center">
        <uib-pagination class="pagination-sm"
                        total-items="totalItems" max-size="maxSize" items-per-page="numPerPage" num-pages="numPages"
                        ng-model="currentPage" boundary-links="true" rotate="false"></uib-pagination>
    </div>
</div>
</div>
  </body>
</html>

特别是，我在输入过滤器中添加了一个ngChange指令，现在使用了remindTypes的副本。不幸的是，我认为您的目标有点过于复杂，无法单独使用角度过滤器。我没有测试顺序，但分页似乎以这种方式工作得很好。

编辑：只需添加对问题作出响应的正确分叉：https://plnkr.co/edit/HMw8U4OUsW5DNDGfQKHY?p=preview

【讨论】：

作为您的建议 <tr ng-repeat="reminderType in reminderTypes | orderBy:sortBy:sortDescending | filter: searchText | filter: paginate"> 但仍然无法正常工作
是的，但它仍然无法正常工作。你可以在这里查看：plnkr.co/edit/2Q9qk4smErwQMc5tyxdn?p=preview
当你说它不起作用时，你的意思是排序不正确对吗？你对文本过滤器的表现满意吗？
是的，它不会仅在显示的页面上对所有数据进行排序，并且文本过滤器也不起作用，当我输入“a”时，该行为空
现在应该可以正常工作了plnkr.co/edit/HMw8U4OUsW5DNDGfQKHY?p=preview