Pagination with only an array of all the pages on angularjs

Question

I've been trying to do pagination using angularjs. I've managed to get all the page numbers in an array but I'm not sure how to go about viewing only 10 pages at a time with the Next and Back buttons.

So far, I have an array of all the pages, a total number of all the records I wanna show on each page (30 of them on each page). Like so:

$scope.showPagingSequence = function () {
        if ($scope.showNumberPagingStats) {
            if ($scope.PageNum < $scope.dynamicReport.PageCount) {
                for (var i = 1; i <= $scope.dynamicReport.PageCount; i++) {
                    $scope.PageNumbers.push(i);
                }
            } 
        }
  }

This is how I implement it in my html,

<div ng-model="showPagingSequence()">
                <ul class="pagination" ng-repeat="pages in PageNumbers">
                    <li><a href="#" ng-click="setPageNumber(pages)">        {{pages}}</a></li>
                </ul>
</div>

How do I limit my pagination to only view a limited number of pages with a Next and Back button?

score 0 · Answer 1 · edited May 23 '17 at 10:30

Check out UI Bootstrap's pagination directive. I ended up using it rather than what is posted here as it has enough features for my current use and has a thorough test spec to accompany it. Example

<pagination 
 ng-model="currentPage"
 total-items="todos.length"
 max-size="maxSize"  
 boundary-links="true">
</pagination>

JS

todos.controller("TodoController", function($scope) {
 $scope.filteredTodos = []
   ,$scope.currentPage = 1
   ,$scope.numPerPage = 10
   ,$scope.maxSize = 5;

 $scope.makeTodos = function() {
   $scope.todos = [];
   for (i=1;i<=$scope.dynamicReport.PageCount;i++) {
     $scope.todos.push({ text:"todo "+i, done:false});
   }
 };
 $scope.makeTodos(); 

 $scope.$watch("currentPage + numPerPage", function() {
   var begin = (($scope.currentPage - 1) * $scope.numPerPage)
   , end = begin + $scope.numPerPage;

 $scope.filteredTodos = $scope.todos.slice(begin, end);
});
});

Please refer this link for further more clarification

Pagination with only an array of all the pages on angularjs

1 Answers1