pagination in angular js ui.bootstrap doesnt work for me
14,657
Solution 1
Take a closer look at the documentation for the pagination control. http://angular-ui.github.io/bootstrap/#/pagination
I guess you're at least missing the ng-model attribute, otherwise your pagination doesn't know where to look for the current value. Guess thats what you meant with current-page.
Solution 2
Use version 10, Here is the sample of pagination
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<section class="main" ng-controller="contentCtrl">
<div ng-repeat="friend in friends">
{{friend.name}}
</div>
<pagination page="currentPage" total-items="totalItems" items-per-page="itemsPerPage" on-select-page="setPage(page)"></pagination>
<p>
total Items: {{totalItems}}<br />
Items per page: {{itemsPerPage}}<br />
Current Page: {{currentPage}}
</p>
</section>
</body>
</html>
JS
// Code goes here
angular.module('plunker', ['ui.bootstrap'])
.controller('contentCtrl', function ($scope) {
$scope.friends = [
{'name':'Jack'},
{'name':'Tim'},
{'name':'Stuart'},
{'name':'Richard'},
{'name':'Tom'},
{'name':'Frank'},
{'name':'Ted'},
{'name':'Michael'},
{'name':'Albert'},
{'name':'Tobby'},
{'name':'Mick'},
{'name':'Nicholas'},
{'name':'Jesse'},
{'name':'Lex'},
{'name':'Robbie'},
{'name':'Jake'},
{'name':'Levi'},
{'name':'Edward'},
{'name':'Neil'},
{'name':'Hugh'},
{'name':'Hugo'},
{'name':'Yanick'},
{'name':'Matt'},
{'name':'Andrew'},
{'name':'Charles'},
{'name':'Oliver'},
{'name':'Robin'},
{'name':'Harry'},
{'name':'James'},
{'name':'Kelvin'},
{'name':'David'},
{'name':'Paul'}
];
$scope.totalItems = 64;
$scope.itemsPerPage = 10
$scope.currentPage = 1;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
console.log('Page changed to: ' + $scope.currentPage);
};
$scope.maxSize = 5;
$scope.bigTotalItems = 175;
$scope.bigCurrentPage = 1;
});
Author by
m hadadi
Updated on June 04, 2022Comments
-
m hadadi almost 2 years
I add
ui-bootstrap-tpls-0.12.0.jsto my project and us accordion and now I wanna use pagination but i get this errorngModelCtrl.$render is not a functionhere is my code
<div ng-controller="paginationCtrl"> <pagination num-pages="noOfPages" current-page="currentPage" on-select-page="pageChanged(page)"></pagination> </div>i add ui.bootstrap
angular.module("boors", ['ui.router','ui.bootstrap','angularUtils.directives.uiBreadcrumbs','ngAnimate','truncate']);and in my script tag i have
<script src="<?=$this->assetsBase?>/js/lib/ui-bootstrap-tpls-0.12.0.js"></script>accordion works fine but pagination doesnt work