angularjs - 使用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>标记以声明您希望该公共(public)项成为表中的默认排序列。