Pagination with AngularJS?

Question

I've tried pagination with AngularJS but I'm not able to implement certain things, like.

I'm able to navigate through using the 'next' and 'previous' but am not sure how to achieve it by just clicking on that particular 'page number' button. And I also want to add focus to the particular 'page number' button on clicking 'next' and 'previous'

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="script.js"></script>
</head>

<body ng-app='myApp'>
    Hello World
    <div ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize">
            {{item}}
        </li>
    </ul>

     <input type="image" src="images/btn_previous.png" alt="previous" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
    <button ng-click="currentPage = currentPage">
        {{currentPage+1 <= numberOfPages()-2 && currentPage+1 || numberOfPages()-2}}
    </button>
    <button ng-click="currentPage = currentPage">
        {{currentPage+2 <= numberOfPages()-1 && currentPage+2 || numberOfPages()-1}}
    </button>
    <button >
        {{currentPage+3 <= numberOfPages() && currentPage+3 || numberOfPages()}}
    </button> . . .
    <button >
        {{numberOfPages()}}
    </button>
    <input type="image" src="images/btn_next.png" alt="next" ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">

</div>
</body>
</html>

Javascript:

var app=angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.currentPage = 0;
    $scope.pageSize = 5;
    $scope.data = [];
    $scope.numberOfPages=function(){
        return Math.ceil($scope.data.length/$scope.pageSize);                
    }
    for (var i=0; i<45; i++) {
        $scope.data.push("Item "+i);
    }
}

app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

Can someone please help me?

score 5 · Accepted Answer · answered Nov 14 '14 at 13:31

5

I think you should give try to Pagination Directive

First you need to include the module in your project:

angular.module('myApp', ['angularUtils.directives.dirPagination']);

Then create the paginated content:

<ANY
dir-paginate="expression | itemsPerPage: (int|expression) [: paginationId (string literal)]"
[current-page=""]
[pagination-id=""]
[total-items=""]>
...
</ANY>

And finally include the pagination itself.

<dir-pagination-controls
[max-size=""]
[direction-links=""]
[boundary-links=""]
[on-page-change=""]
[pagination-id=""]
[template-url=""]>
</dir-pagination-controls>

here is working plunker

answered Nov 14 '14 at 13:31

CrazyGeek

3,397
2
24
38

thanks but I need a solution for my problem in the given code. – kumareloaded Nov 19 '14 at 14:48
1

please give me a plunker or fiddle. – CrazyGeek Nov 19 '14 at 14:49
1

I have updated the give plunker http://plnkr.co/edit/xebTEmoTXgun7DRzflZK?p=preview Please have a look and revert me if you have any concern – CrazyGeek Nov 19 '14 at 19:29
thanks a lot man! but I've got a concern, if I click on the button 8(page number) the three buttons are of the form "8,9,9" but it should stay as "7,8,9" right, since 9 is the last page? And also is it possible to make the buttons static during on-click and change only when clicking on next/prev/first/last? – kumareloaded Nov 20 '14 at 10:35
2

I know that issue, that why i said instead of implementing our own pagination its good to utilize the one which is already build and having build release. – CrazyGeek Nov 20 '14 at 12:43
mm.. ok.. but will there be any copyright issues if I use his custom directives in my application? – kumareloaded Nov 20 '14 at 14:13
1

No man, these are completely opensource thats why its public on github hence any body can use it and contribute. – CrazyGeek Nov 20 '14 at 14:58

score 0 · Answer 2 · answered Dec 21 '15 at 07:34

Download dirPagination.js from here. .
Now include dirPagination.js to your page.
Add angularUtils.directives.dirPagination in your module like this

var app = angular.module("myApp", ['angularUtils.directives.dirPagination']);

4.we use dir-paginate directive for pagination  add dir-paginate in tr tag

<tr dir-paginate="event in events|orderBy:['id', 't']:true |
     itemsPerPage: 5">

5.Add below given code anywhere on your page or where ever you want


 <dir-pagination-controls
            max-size="5"
            direction-links="true"
            boundary-links="true" >
        </dir-pagination-controls>

Use this code as it is ,this will automatically put buttons of

first, next ,previous ,last

and focuses automatically on page no when clicks on button.

Pradeep Ramisetti · Answer 3 · 2016-06-15T11:45:44.810

1) Follow the first as per above answer and download it , next

2) Add these div part in your view page

<div ng-controller="PagenationController"
class="other-controller">
 <div class="text-center">
  <dir-pagination-controls boundary-links="true"
  on-page-change="pageChangeHandler(newPageNumber)"
   template-url="app/views/dirPagination.html"></dir-pagination-controls>
  </div>
</div>

3) Add these in your controller.

 app.controller('PagenationController', PagenationController);
 function PagenationController($scope) {
  $scope.pageChangeHandler = function(num) {
      };
$scope.currentPage = 1;
$scope.pageSize;
$scope.add = true;
 $scope.pageChangeHandler = function(num) {
         };
}

Pagination with AngularJS?

3 Answers3

Linked