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

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);
};