我正在为我的数据集使用分页,现在我正在尝试对其进行排序,但排序函数仅对当前页面的记录进行排序。我想对整个数据集进行排序,而不仅仅是当前页面。有什么办法可以做到吗?谢谢。
这是我的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>
最佳答案
我会高度考虑调查 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)项成为表中的默认排序列。
关于angularjs - 使用angularjs对所有页面进行排序(不仅是当前页面),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43004110/