Question

我正在为我的数据集使用分页，现在我尝试对其进行排序，但排序功能仅对当前页面的记录进行排序。我想要整个数据集不仅是当前页面。有没有可行的办法呢？感谢。

这是我的controller.js

angular.module("app").controller("billetController", function($scope, billetService) {
  var self = this;
  self.billets = [];
  $scope.allCandidates = [];
  $scope.aCandidates = [];
  $scope.totalItems = 0;
  $scope.sortType = 'statutBillet'; // set the default sort type
  $scope.sortReverse = false; // set the default sort order

  getBillets();

  function getBillets() {
    billetService.getBillets()
      .then(
        function(d) {

          console.log(d);
          self.billets = d;
          $scope.totalItems = self.billets.length;
          $scope.$watch("currentPage", function() {
            console.log($scope.currentPage);

            $scope.aCandidates = self.billets.slice(
              ($scope.currentPage - 1) * $scope.itemsPerPage,
              $scope.currentPage * $scope.itemsPerPage
            );
          });

        },
        function(errResponse) {
          console.error('Error while fetching ');
        }
      );
  }

  $scope.currentPage = 1;
  $scope.itemsPerPage = 50;


  function setPagingData(page, allCandidates) {
    var pagedData = allCandidates.toString().slice(
      (page - 1) * $scope.itemsPerPage,
      page * $scope.itemsPerPage
    );
    $scope.aCandidates = pagedData;
  }

  console.log($scope.allCandidates);

});

和我在view.jsp中的表：

<div ng-controller="billetController">
  <table class="table table-hover">
    <thead>
      <th>ID</th>
      <th>
        <a href="#" ng-click="sortType = 'statutBillet'; sortReverse = !sortReverse">
                                            Statut
                                            <span ng-show="sortType == 'statutBillet' && !sortReverse" class="fa fa-caret-down"></span>
                                            <span ng-show="sortType == 'statutBillet' && sortReverse" class="fa fa-caret-up"></span>
                                            </a></th>
      <th>Priorité</th>
      <th>Impact</th>
      <th>Resumé</th>
      <th>Date de création</th>
    </thead>
    <tbody>
      <tr ng-repeat="billet in aCandidates | orderBy:sortType:sortReverse">
        <td>{{ billet.idBillet }}</td>
        <td>{{ billet.statutBillet }}</td>
        <td>{{ billet.prioriteBillet }}</td>
        <td>{{ billet.impactBillet }}</td>
        <td>{{ billet.resumeBillet }}</td>
        <td>{{ billet.dateCreation | date:'yyyy-MM-dd HH:mm:ss' }}</td>
      </tr>

    </tbody>

  </table>
  <uib-pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"></uib-pagination>
</div>

Answer 1

我会高度考虑调查angular-tablesort。这个库将为您节省大量时间，并阻止您编写自己的排序代码。它也适用于UI-Bootstrap。

以下是使用angular-tablesort与uib-pagination：

的示例

                <table class="table table-striped" ts-wrapper>
                    <thead>
                        <tr>
                            <th ts-criteria="policyNumber">Policy Number</th>
                            <th ts-criteria="email">Email</th>
                            <th ts-criteria="isLinked">Linked</th>
                            <th ts-criteria="createdAt" ts-default="descending">Created At</th>
                            <th>Details</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="user in adminLegacyUsersCtrl.filteredUsers = adminLegacyUsersCtrl.users
        | tablesort
        | searchLegacyUsers:adminLegacyUsersCtrl.query
        | filterLegacyUsersByLinked:adminLegacyUsersCtrl.selectedLinkOption.id
        | startFrom:(adminLegacyUsersCtrl.currentPage-1)*adminLegacyUsersCtrl.itemsPerPage
        | limitTo:adminLegacyUsersCtrl.itemsPerPage" ts-repeat>
                            <td>
                                <a ng-click="adminLegacyUsersCtrl.openPolicyDetailsModal(user, adminLegacyUsersCtrl.getPolicy(user.policyNumber))">{{user.policyNumber}}</a>
                            </td>
                            <td>{{user.email}}</td>
                            <td>{{user.isLinked}}</td>
                            <td>{{user.createdAt | date : "MMMM dd, yyyy H:mm"}}</td>
                            <td ng-click="adminLegacyUsersCtrl.openLegacyUserDetailsModal(user)"><a>View</a></td>
                        </tr>
                    </tbody>
                </table>
                <div class="col-lg-12 col-lg-offset-4">
                    <ul uib-pagination items-per-page="adminLegacyUsersCtrl.itemsPerPage" total-items="adminLegacyUsersCtrl.totalItems" ng-model="adminLegacyUsersCtrl.currentPage" max-size="5" class="pagination-sm" boundary-links="true"></ul>
                </div>

让angular-tablesort正常工作：

1）将ts-wrapper属性指令应用于您的表。

2）对要排序的每个ts-criteria='nameOfProperty应用<th>。（即在你的例子中ts-criteria="idBillet"）

3）应用tablesort过滤器（确认此过滤器在您的其他过滤器之前！）

4）最后，将ts-repeat属性指令应用于ng-repeat语句。

5）（可选）您可以将ts-default属性应用于其中一个<th>标记，以表明您希望该公共列为表格中的默认排序列。

Answer 2

我认为您的代码来自我对this post分页的回答。所以我继续更新plunk以包括列排序。基本上，您需要对所有数据进行排序，然后再次调用setPagingData以仅返回页面的数据。

// column collection to persist sort order to allow for ASC/DESC switch
var cols = [{
  name: 'firstName',
  orderDesc: false
}, {
  name: 'lastName',
  orderDesc: false
}];

$scope.sortData = function(sortCol) {
  // make sure it a valid column
  var column = cols.find(function(col) {
    return col.name === sortCol;
  });

  if (!column) return;

  column.orderDesc = !column.orderDesc;

  var order = !column.orderDesc ? 1 : -1;
  allCandidates.sort(function(a, b) {
    if (a[column.name] < b[column.name])
      return -1 * order;
    if (a[column.name] > b[column.name])
      return 1 * order;
    return 0;
  });

  setPagingData($scope.currentPage);
};

使用angularjs（不仅是当前的页面）对所有页面进行排序

2 个答案: