HangulSR
HangulSR

Reputation: 259

Angularjs "jump to page" pagination

I have a pagination function, and I would like to create a textbox and button where user can enter the page number they want to go. Is there a way to do this? Would appreciate it if I could get a reference link or something. Thanks!

My HTML :

<div class="pagingDiv">
<button class="btnPaging" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
    Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button class="btnPaging" ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
    Next
</button>
</div>

JS:

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

How it look like currently

enter image description here

Expected Result:

enter image description here

Upvotes: 2

Views: 1227

Answers (1)

Abdullah Wajahat
Abdullah Wajahat

Reputation: 83

Use a text box and bind the model currentPage to it.

    <button class="btnPaging" ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
Next
    </button>
    <input ng-model="currentPage" type="text">
    <button type="button" ng-click="ChangePage()"></button>

You can use the ChangePage function on you angular file to change the page. and use the text box to bind the current page variable.

Upvotes: 2

Related Questions