OHSOMEDEVS: Pagination using AngularJS

Most of us are having confusions on how to implement a pagination on our website specially when we are having a tons of data to fetch from our server.

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

But before that, there are pre-requisites for achieving this tutorial:

AngularJs

https://code.angularjs.org/1.4.5/
CDN: https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js

AngularUI

https://angular-ui.github.io/bootstrap/

Bootstrap (Optional: to have some style)

http://getbootstrap.com
CDN: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css

Embedding the scripts. Add the script references to AngularJs, AngularUI, and style reference to Bootstrap in the head of you HTML:

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);
        };
    });
 
}());

Let's now create the VIEW. Modify the HTML body as bellow:

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.