Pagination using AngularJS
AngularUI pagination directive can be used to easily enable paging on your web page. In this tutorial we will learn how to do that.
Pre-requisites
You need to download the following scripts and add a script reference in your web page.
-
AngularJs
https://code.angularjs.org/1.4.5/
CDN: https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js
-
AngularUI
Optional (to have some style)
-
Bootstrap
http://getbootstrap.com/getting-started/
CDN: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css
If you are using Visual Studio you can use NuGet Package Manager and download AngularJs, AngularUI, and Bootstrap.
Adding References
Add the script references to AngularJs, AngularUI, and style reference to Bootstrap in the head of you HTML:
<script src="Scripts/angular.min.js"></script> <script src="Scripts/angular-ui/ui-bootstrap-tpls.js"></script> <link href="Content/bootstrap.css" rel="stylesheet" />
Create angular module, name it paging-app, and inject ui.bootstrap in dependencies array which enables you to use AngularUI pagination directive.
var app = angular.module('paging-app', ['ui.bootstrap']);
Add a controller to the module and name it MainCtrl (or any other name you wish).
app.controller('MainCtrl', function ($scope) {
// a sample array use for paging
$scope.list = [];
$scope.currentPage = 1; // keeps track of the current page
$scope.pageSize = 5; // holds the number of items per page
$scope.init = function () { // initialize the sample list with some values
for (var i = 0; i < 100; i++) {
$scope.list.push({ 'name': 'name ' + i });
}
};
})
Add a filter called start and modifies the code as bellow:
.filter('start', function () {
return function (input, start) {
if (!input || !input.length) { return; }
start = +start;
return input.slice(start);
};
});
This filter will be used to slice the array based on the current page. We will use it when filtering our list to be displayed on our view.
To sum it up he is our script:
(function () {
var app = angular.module('paging-app', ['ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
// a sample array use for paging
$scope.list = [];
$scope.currentPage = 1; // keeps track of the current page
$scope.pageSize = 5; // holds the number of items per page
$scope.init = function () { // initialize the sample list with some values
for (var i = 0; i < 100; i++) {
$scope.list.push({ 'name': 'name ' + i });
}
};
})
.filter('start', function () {
return function (input, start) {
if (!input || !input.length) { return; }
start = +start;
return input.slice(start);
};
});
}());
Create View
Modify the HTML body as bellow:
<body ng-app="paging-app">
<br />
<div class="container" ng-controller="MainCtrl" ng-init="init()">
<div>
<div ng-repeat="item in list | start: (currentPage - 1) * pageSize | limitTo: pageSize"
class="alert alert-success col-md-12">
<span ng-bind="item.name"></span>
</div>
<pagination total-items="list.length" items-per-page="pageSize" ng-model="currentPage" max-size="5"
class="pagination-sm"></pagination>
</div>
</div>
</body>
We call init() method to initialize the sample array in ng-init.
Take note of different filters used in order to narrow down the list the number of items per page as well as how many items to be display in a page:
ng-repeat="item in list | start: (currentPage - 1) * pageSize | limitTo: pageSize"
As mentioned earlier the start filter is used to slice the array based what page we are in. The limitTo filter is used to filter the number of items in the list.
Pagination Directive
Pagination directive is AngularUI directive.
<pagination total-items="list.length" items-per-page="pageSize" ng-model="currentPage" max-size="5" class="pagination-sm"></pagination>
-
ng-model: Current page number. First page is 1.
-
total-items: Total number of items in all pages. We set it to our list size.
-
items-per-page (Defaults: 10): Maximum number of items per page.
-
max-size (Defaults: null): Limit number for pagination size.
Refer to the documentation for the full list of options you have for the Pagination directive.
Result
Browse your page in any browser and see the result:
I know this post is old but on the off chance you get around to reading this just wanted to say thank your for the most simplified tutorial i found on adding this into angular. Good job.
You are welcome Alex, I am happy it is helpful.
very easy to follow and can’t wait to read the next one(with filtering)
Thank you Behnam.
I met a small issue and found that since angular-bootstrap 1.x, all the directive now has a `uib-` prefix, eg. use uib-pagination instead of pagination, otherwise the pagination part won’t be displayed.
Hi, you are welcome. I am happy this is helpful. You are right, this example uses an older version of ui-bootstraper. In the next post’s comment I have answered a question on how to make it work with the new ui-bootstraper version; using uib- prefix. Thanks for mention it here too.
i added uib prefix instead of pagination but i could still not see my pagination link plz help