How to use UI-Bootstrap Pagination with ngRepeat in Angular Js

Gautam Amit September 09, 2017

Here give the detailed example of how to use pagination in angularjs.

 HTML:-----

 <!doctype html> <html ng-app="unified"> <head> <script src="~/scripts/angular.js"></script>
<script src="~/scripts/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="paging.js"></script> <link href="~/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div ng-controller="Pagingcontroller"> <table class="table"> <tr ng-repeat="row in data.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))"> <td>{{row.name}}</td> <td>{{row.id}}</td> </tr> </table> View <select ng-model="viewby" ng-change="setItemsPerPage(viewby)"> <option>3</option> <option>5</option> <option>10</option> <option>20</option> <option>30</option> </select> records at a time. <pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" class="pagination-sm" items-per-page="itemsPerPage"></pagination> <pre>The selected page no: {{currentPage}}</pre> <button class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button> <hr /> <h4>Pager</h4> <pager total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"></pager> <hr /> <h4>Limit the maximum visible buttons</h4> <pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" items-per-page="itemsPerPage"></pagination> <pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages" items-per-page="itemsPerPage"></pagination> <pre>Page: {{currentPage}} / {{numPages}}</pre> </div> </body> </html>
Javascript:---paging.js///

 angular.module('unified', ['ui.bootstrap']);
var Pagingcontroller= function($scope) {
    $scope.data = [{
        "name": "Bell",
        "id": "K0H 2V5"
    }, {
        "name": "Octavius",
        "id": "X1E 6J0"
    }, {
        "name": "Alexis",
        "id": "N6E 1L6"
    }, {
        "name": "Colton",
        "id": "U4O 1H4"
    }, {
        "name": "Abdul",
        "id": "O9Z 2Q8"
    }, {
        
        "name": "Callum",
        "id": "L9P 3W5"
    }, {
        "name": "Tiger",
        "id": "R9A 4E4"
    }, {
        "name": "Summer",
        "id": "R4B 4Q4"
    }, {
        "name": "Beverly",
        "id": "M5E 4V4"
    }, {
        "name": "Xena",
        "id": "I8G 6O1"
    }, {
        "name": "Yael",
        "id": "L1K 5C3"
    }, {
        "name": "Stacey",
        "id": "A4G 1S4"
    }, {
        "name": "Marsden",
        "id": "T1J 5J3"
    }, {
        "name": "Uriah",
        "id": "S9S 8I7"
    }, {
        "name": "Kamal",
        "id": "Y8Z 6X0"
    }, {
        "name": "MacKensie",
        "id": "W2N 7P9"
    }, {
        "name": "Amelia",
        "id": "X7A 0U3"
    }, {
        "name": "Xavier",
        "id": "B8I 6C9"
    }, {
        "name": "Whitney",
        "id": "H4M 9U2"
    }, {
        "name": "Hakeem",
        "id": "S5P 3P6"
    }];
    $scope.viewby = 10;
    $scope.totalItems = $scope.data.length;
    $scope.currentPage = 4;
    $scope.itemsPerPage = $scope.viewby;
    $scope.maxSize = 5; //Number of pager buttons to show

     $scope.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };

     $scope.pageChanged = function() {
        console.log('Page changed to: ' + $scope.currentPage);
    };

     $scope.setItemsPerPage = function(num) {
        $scope.itemsPerPage = num;
        $scope.currentPage = 1; //reset to first page
    }
};
OUTPUT:---



































Hope you like the post . Please share and comment the queries below or customer care section.

Thanks,











Tags

Post a Comment

1 Comments