I am currently displaying 2 records per page out of a total of 10 pages. I would like the header to display the total items in this format: 1-2 of 10, indicating record numbers 1 and 2 out of 10. When I click the next button, it should show me records 3-4 of 10. I have not been able to find any guidance on how to achieve this from Angular tutorials. Can someone please help me with this?
Below is my pagination code in HTML:
<pagination page="currentPage" max-size="maxSize" total-items="totalItems"
items-per-page="entryLimit" boundary-links="true" rotate="false" style="cursor:pointer">
</pagination>
And here is the controller logic being used:
$scope.currentPage = 1;
$scope.maxSize = 2;
$scope.totalLeadItems = $scope.finalLeadData.dataval;
$scope.totalItems = $scope.finalLeadData.dataval.length;
$scope.entryLimit = 2; // items per page
$scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
$scope.search = function (item) {
//console.log(item.LEAD_NM);
return !!((angular.lowercase(item.LEAD_NM).indexOf($scope.search.LEAD || '') !== -1 || angular.lowercase(item.LEAD_MBL).indexOf($scope.search.LEAD || '') !== -1)); };
//$watch search to update pagination
$scope.$watch('search.LEAD', function (newVal) {
$scope.filtered = filterFilter($scope.finalLeadData.dataval, newVal);
$scope.totalItems = $scope.filtered.length;
$scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
$scope.currentPage = 1;
}, true);
});