Issue
Can anybody help me with angularjs sorting across all the pages when I am using Server side pagination and sorting.
I am using ui-bootsrap for pagination;
Code as attached.
My sorting is happening only once in ascending order.Any idea how to sort in both direction ? i.e i m passing the sortBy as +property to sort i need to toggle the property with – infront once its sorted in asc order. Any directive to handle that toggle?
$scope.maxSize = 5;
$scope.currentPage = 1;
$scope.itemsPerPage = 5;
//This method gets called each time the page is loaded or move to next page
$scope.isResultExist = function (list) {
$scope.list = list;
return $scope.populateResult();
};
$scope.populateResult = function () {
if ($scope.list != undefined) {
$scope.totalItems = $scope.list.length;
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage)
, end = begin + $scope.itemsPerPage;
$scope.result = $scope.list.slice(begin, end);
}
};
$scope.sort_by = function (sortBy) {
if ($scope.list != undefined) {
var sortOrder = 1;
$log.debug("**************list : " + $scope.list);
$scope.list.sort(function (a, b) {
for (var k = 0; k < $scope.list.length; k++) {
var valueA = a[sortBy];
var valueB = b[sortBy];
var result = (valueA < valueB) ? -1 : (valueA > valueB) ? 1 : 0;
return result * sortOrder;
}
});
$scope.populateResult();
}
};<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<th class="source"><a href="#" ng-click="sort_by('source')" data-toggle="tooltip" bs-tooltip
data-title="sort by Source ID">Source ID<i class="fa fa-sort"></i>
</a></th>
<tr data-ng-repeat="keyRingItem in result ">
Pagination:
<pagination items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage"
max-size="maxSize" class="pagination-sm" boundary-links="true">
</pagination>Solution
If your paging is being done server-side, then the sorting must be done server-side.
Angular will only be able to sort the page of data that it has.
Either implement the sorting server-side, or retrieve all data and implement the paging client-side.
Answered By – Starscream1984
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0