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?

CrazyGeek · Accepted Answer · 2014-11-14 13:31:58Z

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, 2014 at 13:31

CrazyGeek

3,4572 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

kumareloaded Over a year ago

thanks but I need a solution for my problem in the given code.

CrazyGeek Over a year ago

please give me a plunker or fiddle.

CrazyGeek Over a year ago

I have updated the give plunker plnkr.co/edit/xebTEmoTXgun7DRzflZK?p=preview Please have a look and revert me if you have any concern

CrazyGeek Over a year ago

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 Over a year ago

No man, these are completely opensource thats why its public on github hence any body can use it and contribute.

|

Sahil Saini · Accepted Answer · 2015-12-21 07:34:58Z

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 · Accepted Answer · 2016-06-15 11:45:44Z

0

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) {
         };
}

edited Jun 15, 2016 at 11:45

answered Jun 15, 2016 at 5:55

Pradeep Ramisetti

971 gold badge1 silver badge8 bronze badges

Collectives™ on Stack Overflow

Pagination with AngularJS?

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related