Pagination using AngularJS

11. September 2015 AngularJS 5

AngularUI pagination directive can be used to easily enable paging on your web page. In this tutorial we will learn how to do that.

Demo

Pre-requisites

You need to download the following scripts and add a script reference in your web page.

Optional (to have some style)

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:


5 thoughts on “Pagination using AngularJS”

  • 1
    alex gwartney on August 7, 2016 Reply

    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.

    • 2
      Behnam on August 8, 2016 Reply

      You are welcome Alex, I am happy it is helpful.

  • 3
    cyper on January 5, 2017 Reply

    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.

    • 4
      Behnam on January 6, 2017 Reply

      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.

  • 5
    amit on March 7, 2018 Reply

    i added uib prefix instead of pagination but i could still not see my pagination link plz help

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.