角度分页不对所有页面进行排序和过滤答案

【问题标题】：Angular pagination don't sort and filter on all pages角度分页不对所有页面进行排序和过滤
【发布时间】：2017-10-24 15:41:08
【问题描述】：

我正在使用 angular 1.5.5 和 angular-bootstrap 1.3.3 通过 ng-repeat 对表格上的数据进行分页、排序和过滤，但它仅在当前页面上进行排序和过滤，而不是在所有页面。

app.js

var app = angular.module("sac.app", ['ngResource', 'ui.router', 'ui.bootstrap']);
app.config(function config($stateProvider, $urlRouterProvider) {
    'use strict';
    $urlRouterProvider.otherwise('/home');

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'views/home.html'
        })
        .state('patients', {
            url: '/patients',
            controller: 'PatientController',
            templateUrl: 'views/patients.html'
        });

app.controller('PatientController', ['$scope', 'patients', function ($scope, patients) {
    patients.success(function (data) {
        $scope.patients = data;
        $scope.sortType     = 'name'; 
        $scope.sortReverse  = true; 
        $scope.search   = '';      
        $scope.currentPage = 1;
        $scope.numPerPage = 2;
        $scope.totalItems = $scope.patients.length;
        $scope.maxSize = 5;
        $scope.paginate = function (value) {
            var begin, end, index;
            begin = ($scope.currentPage - 1) * $scope.numPerPage;
            end = begin + $scope.numPerPage;
            index = $scope.patients.indexOf(value);
            return (begin <= index && index < end);
        };
    })
}]);

app.factory('patients', ['$http', function ($http) {
    return $http.get('api/patients')
            .success(function(data) {
              return data;
            })
            .error(function(err) {
              return err;
            });
}]);

患者.html

  <form>
    <div class="input-group">
        <div class="input-group-addon"><i class="fa fa-search"></i></div>
        <input type="text" class="form-control" placeholder="Ingrese el Nombre o Apellido del Paciente" ng-model="search" autofocus>
        <div class="input-group-btn">
            <a ui-sref="patient.create" class="btn btn-primary"><i class="fa fa-plus"></i> Nuevo Paciente</a>
        </div>
    </div>
  </form>   
    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>
                <a href="" ng-click="sortType = 'name'; sortReverse = !sortReverse">
                    Nombre Completo
                    <span ng-show="sortType == 'name'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
                </a>
            </th>
            <th>
                <a href="" ng-click="sortType = 'identity'; sortReverse = !sortReverse">
                    Identificación
                    <span ng-show="sortType == 'identity'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
                </a>
            </th>
            <th>
                <a href="" ng-click="sortType = 'age'; sortReverse = !sortReverse">
                    Edad
                    <span ng-show="sortType == 'age'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
                </a>
            </th>
            <th>
                <a href="" ng-click="sortType = 'telephone'; sortReverse = !sortReverse">
                    Teléfono
                    <span ng-show="sortType == 'telephone'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
                </a>
            </th>
            <th>
                <a href="" ng-click="sortType = 'email'; sortReverse = !sortReverse">
                    Email
                    <span ng-show="sortType == 'email'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
                </a>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="patient in patients | orderBy:sortType:sortReverse | filter:paginate | filter:search">
            <td>{{ patient.name }} {{ patient.last_name }}</td>
            <td>{{ patient.identity }}</td>
            <td>{{ patient.age }}</td>
            <td>{{ patient.telephone }}</td>
            <td>{{ patient.email }}</td>
        </tr>
        </tbody>
    </table>
    <uib-pagination first-text="Primera" last-text="Última" next-text="&gt;" previous-text="&lt;"
                    total-items="totalItems" items-per-page="numPerPage" max-size="maxSize"
                    ng-model="currentPage" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination>

【问题讨论】：

标签： javascript angularjs twitter-bootstrap pagination

【解决方案1】：

请试试这个

(function(){
  var app = angular.module("sac.app", ['ui.bootstrap']);

app.controller('PatientController', ['$scope', function ($scope) {
        $scope.patients = [{name:'A',age:25},{name:'B',age:26},{name:'F',age:28},{name:'N',age:50}];
        $scope.sortType     = 'name'; 
        $scope.sortReverse  = true; 
        $scope.search   = '';      
        $scope.currentPage = 1;
        $scope.numPerPage = 2;
        $scope.totalItems = $scope.patients.length;
        $scope.maxSize = 5;
        
        var sortString = function(array, proName,desc){
          array.sort(function(a, b){
           var nameA=a[proName].toString().toLowerCase(), nameB=b[proName].toString().toLowerCase(), temp;
           if(desc){
             temp = nameA; nameA= nameB; nameB=temp;
           }
           if (nameA < nameB)
            return -1
           if (nameA > nameB)
            return 1
           return 0
          });
        };
        sortString($scope.patients, 'name', $scope.sortReverse);
        $scope.orderby = function(name){
$scope.currentPage = 1;
          sortString($scope.patients, name, $scope.sortReverse)
        };
        $scope.paginate = function (value) {
            var begin, end, index;
            begin = ($scope.currentPage - 1) * $scope.numPerPage;
            end = begin + $scope.numPerPage;
            index = $scope.patients.indexOf(value);
            return (begin <= index && index < end);
        };
}]);
}());

<!DOCTYPE html>
<html>

  <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css@*" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js" data-semver="1.5.2" data-require="angular.js.1.3@*"></script>
    <script data-require="ui-bootstrap@*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="sac.app">
      <div ng-controller="PatientController">  
    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>
                <a href="" ng-click="sortType = 'name'; sortReverse = !sortReverse; orderby('name')">
                    Name
                    <span ng-show="sortType == 'name'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
                </a>
            </th>
            
            <th>
                <a href="" ng-click="sortType = 'age'; sortReverse = !sortReverse; orderby('age')">
                    Age
                    <span ng-show="sortType == 'age'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
                </a>
            </th>
            
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="patient in patients | filter:paginate | filter:search">
            <td>{{ patient.name }}</td>
            <td>{{ patient.age }}</td>
        </tr>
        </tbody>
    </table>
    <uib-pagination first-text="Primera" last-text="Última" next-text="&gt;" previous-text="&lt;"
                    total-items="totalItems" items-per-page="numPerPage" max-size="maxSize"
                    ng-model="currentPage" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination>
      </div>
    </div>
  </body>

</html>

【讨论】：

【解决方案2】：

(function(){
  var app = angular.module("sac.app", ['ui.bootstrap']);

app.controller('PatientController', ['$scope', function ($scope) {
        $scope.patients = [{name:'A',age:25},{name:'B',age:26},{name:'F',age:28},{name:'N',age:50}];
        $scope.sortType     = 'name'; 
        $scope.sortReverse  = true; 
        $scope.search   = '';      
        $scope.currentPage = 1;
        $scope.numPerPage = 2;
        $scope.totalItems = $scope.patients.length;
        $scope.maxSize = 5;
        
        var sortString = function(array, proName,desc){
          array.sort(function(a, b){
           var nameA=a[proName].toString().toLowerCase(), nameB=b[proName].toString().toLowerCase(), temp;
           if(desc){
             temp = nameA; nameA= nameB; nameB=temp;
           }
           if (nameA < nameB)
            return -1
           if (nameA > nameB)
            return 1
           return 0
          });
        };
        sortString($scope.patients, 'name', $scope.sortReverse);
        $scope.orderby = function(name){
$scope.currentPage = 1;
          sortString($scope.patients, name, $scope.sortReverse)
        };
        $scope.paginate = function (value) {
            var begin, end, index;
            begin = ($scope.currentPage - 1) * $scope.numPerPage;
            end = begin + $scope.numPerPage;
            index = $scope.patients.indexOf(value);
            return (begin <= index && index < end);
        };
}]);
}());

<!DOCTYPE html>
<html>

  <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css@*" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js" data-semver="1.5.2" data-require="angular.js.1.3@*"></script>
    <script data-require="ui-bootstrap@*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="sac.app">
      <div ng-controller="PatientController">  
    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>
                <a href="" ng-click="sortType = 'name'; sortReverse = !sortReverse; orderby('name')">
                    Name
                    <span ng-show="sortType == 'name'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
                </a>
            </th>
            
            <th>
                <a href="" ng-click="sortType = 'age'; sortReverse = !sortReverse; orderby('age')">
                    Age
                    <span ng-show="sortType == 'age'" class="fa" ng-class="sortReverse ? 'fa-caret-up' : 'fa-caret-down'"></span>
                </a>
            </th>
            
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="patient in patients | filter:paginate | filter:search">
            <td>{{ patient.name }}</td>
            <td>{{ patient.age }}</td>
        </tr>
        </tbody>
    </table>
    <uib-pagination first-text="Primera" last-text="Última" next-text="&gt;" previous-text="&lt;"
                    total-items="totalItems" items-per-page="numPerPage" max-size="maxSize"
                    ng-model="currentPage" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination>
      </div>
    </div>
  </body>

</html>

【讨论】：

这只是代码；通过解释，这个答案会大大改善。

【解决方案3】：

只需编写一个自定义过滤函数，并在其中手动进行分页、排序和过滤。

【讨论】：

【解决方案4】：

我找到了这个解决方案：

app.js

$scope.patients = data;
$scope.sortType     = 'name'; // set the default sort type
$scope.sortReverse  = false;  // set the default sort order
$scope.search   = '';         // set the default search/filter term
$scope.currentPage = 1;
$scope.itemsPerPage = 5;
$scope.totalItems = $scope.patients.length;
$scope.maxSize = 5;
$scope.paginate = function (value) {
    var begin, end, index;
    begin = ($scope.currentPage - 1) * $scope.itemsPerPage;
    end = begin + $scope.itemsPerPage;
    index = $scope.patients.indexOf(value);
    return (begin <= index && index < end);
};
$scope.setPage = function (pageNo) {
    $scope.currentPage = pageNo;
};
$scope.$watch('currentPage + itemsPerPage', function() {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
        end = begin + $scope.itemsPerPage;

    $scope.filteredFriends = $scope.patients.slice(begin, end);
});

$scope.noOfPages = Math.ceil($scope.totalItems / $scope.itemsPerPage);

$scope.$watch('search', function (newVal, oldVal) {
    $scope.filtered = filterFilter($scope.patients, newVal);
    $scope.totalItems = $scope.filtered.length;
    $scope.noOfPages = Math.ceil($scope.totalItems / $scope.itemsPerPage);
    $scope.currentPage = 1;
}, true);

患者.html

<tr ng-repeat="patient in filtered = patients | orderBy:sortType:sortReverse | filter:search | startFrom:(currentPage-1)*itemsPerPage | limitTo:itemsPerPage">
    <td>{{ patient.name }} {{ patient.last_name }}</td>
    <td>{{ patient.identity }}</td>
    <td>{{ patient.age }}</td>
    <td>{{ patient.telephone }}</td>
    <td>{{ patient.email }}</td>
</tr>
<uib-pagination first-text="&lt;&lt;" last-text="&gt;&gt;" next-text="&gt;" previous-text="&lt;"
                                    total-items="totalItems" items-per-page="itemsPerPage" max-size="noOfPages"
                                    ng-model="currentPage" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination>

【讨论】：