CODEWITHSUNDEEP
paginationangular-ui-bootstrap
dip
dip

Reputation: 1261

Angular UI Bootstrap pagination not working

I am using ui-Bootstrap pagination but its not working as expected I refer following post but its not working for me.

How do I tell ui-Bootstrap what content to paginate?

My code is as follows.

<div>
  <ul>
     <li ng-repeat= "payment in paymentHistory">
        <div >
          <div > 
            <p >payment.status</p> 
           </div>
           <div>
              <p >payment.cost</p>
           </div>
        </div>
      </li>
    </ul>
 </div>
 <div ng-show="pagination"> <pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination></div>

My controller code:

paymentFactory.getPaymentHistory( )
.success(function (paymentHisInfo) {
     for(var i = 0; i< paymentHisInfo.list.length; i++){
      $scope.paymentHistory.push({
     "status":paymentHisInfo.list[i].status,
              "cost":paymentHisInfo.list[i].cost});
       }
       $scope.list = $scope.paymentHistory;
       $scope.itemsPerPage = 5;
       $scope.currentPage = 1;
           $scope.pageCount=Math.ceil($scope.list.length / $scope.itemsPerPage);
       $scope.list.$promise.then(function () {
      $scope.totalItems = $scope.list.length;

        var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
        end = begin + $scope.itemsPerPage;
                $scope.paymentHistory = $scope.list.slice(begin, end);
      });

    })
    .error(function(){
        console.log("error occured in getPaymentHistory");
    });
Please let me know whats wrong in my code

Upvotes: 0

Views: 3408

Answers (1)

Anirudh Bhardwaj
Anirudh Bhardwaj

Reputation: 119

This might help.

UIB Pagination is lightweight pagination directive that helps us to paginate our web project. To use Angular UI bootstrap pagination we can get the code form here https://angular-ui.github.io/bootstrap/ and can use in our project. To use we have HTML snippet to add in our project.

<pagination boundary-links="true" max-size="maxSize" ng-change="pageChanged()" ng-model="currentPage" total-items="totalPages">  </pagination>
angular.module('myModule', ['ui.bootstrap']);
 .controller('myCtrl', ['$scope',    function ($scope) {
     $scope.maxSize = 5;
     $scope.currentPage = 1;
     $scope.totalPages = 20;

   $scope.pageChanged = function () {
        // operation to perform on page changed
        console.log("Hi I am on ",($scope.currentPage-1),"page")
    };
  }])

1) The maxSize is number page navigator on a page.

2) The currentPage is active page in HTML specified by ng-model.

3) The totalPages is number of all the pages.

4) boundary-links is used to display. First and last page button and by default it is false.

4) ng-change call the operation on page change event.

Hope it helps. Thanks, Oodles Technologies

Upvotes: 1

Related Questions