Tuesday, 24 April 2018

Add Pagination to a Page Using AngularJS and BootStrap

In this tutorial, I am going to teach you an easy way to add pagination to a html page using AngularJS and Bootstrap. Trust me, this would be very easy!

I would also share my code freely with you. So you can copy and use, though it took my some days to figure out and put it together.

  1. Background
  2. Scripts and CSS to Include
  3. Script that Handles Pagination
  4. The HTML Page
  5. Final Notes


We would use a dataset from SharePoint list retrieved using AngularJS.
The list is named users with two fields Name and Points

2. Scrips and CSS to Include

Place the following 4 scripts and on css file in the head tag of your html file. These are all the scripts you need for pagination.

  <script type="application/javascript" src="js/angular.1.6.2.js"></script>
  <script type="application/javascript" src="js/angular-route.1.6.2.js"></script>
  <script type="application/javascript" src="js/jquery-3.2.1.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
Listing 1.0: Scripts and Css for AngularJS and BootStrap

3. Script That Handles Pagination

You then need to write the script that handles the pagination.
In the script below, there is a function called GetListItems(). You need to write this script yourself as this is not the focus of this lesson. Just know that this script returns the data we would need to paginate.
(If you want the whole code, let me know in the comment box below or to the left of this page)

        var appVar = angular.module('plunker', ['ui.bootstrap']);

        appVar.controller("controller1", function($scope){    
            GetListItems($scope, "Users"); //Uses the $.ajax to retrieve data from sharepoint and place it in the scope
            $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
Listing 1.1: Script that Handles Pagination

4. The HTML Page

Now lets see how your table would look like in the html page.

<div ng-app="plunker">    
    <div id="App1" ng-controller="controller1">    
        <h1>List of Items Being Paginated Final</h1>    
        <table border="1">
            <tr >
        <tr ng-repeat="row in data.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) | orderBy : '-Percentage'">
        <select ng-model="viewby" ng-change="setItemsPerPage(viewby)">
        </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>
Listing 1.2: HTML Page With Table Markup

The Table is quite simple, contains only two columns, Name and Points.
The code includes a dropdownlist (Select list) to display numbers that the user can select.. Selecting any of the numbers filters the list and displays that number of items in the table

5. Final Notes

I sincerely hope that these lesson helps you to achieve pagination in your page. I do thing it is quite simple provided you already have a knowlede of HTML, AngularJS and JavaScript.
However, if you have any difficulties, just let me know in the comment box below or to the left of this page, so I could speak with you over skype and guide you.

Welldone, my programmer!