How To Implement Pagination in Angular JS? [With Practical Example]

Before we move on to understanding how pagination works in Angular JS and how it is implemented in that framework, let us take it step by step and begin by discussing Angular JS and pagination in general. 

Check out our free courses to get an edge over the competition.

What is Angular JS?

Angular JS is among the most preferred structural frameworks for creating dynamic web applications. It allows developers to use HTML as template language, and even permits the extension of HTML syntax for allowing clear and concise expression of the various components of a web application.

It comes with dependency injection and data binding capabilities to do away with a greater part of the code that has to be written by the developers. All of this takes place inside the browser, making Angular JS a framework that can be conveniently used with almost any server technology. 

Check out upGrad’s Advanced Certification in Cloud Computing

Angular JS is an open-source framework that shares several similarities with JavaScript. It is mostly used by developers for developing applications that need to display all their content, text, and graphics in a single page. However, this doesn’t, in any way, mean that it can’t be used to create multi-page applications. 

We will explain in this post how pagination helps split the content into more than one pages without affecting the flow and navigation amongst other factors. It is such a popular model-view controller framework across the globe due to two very important reasons – it is Google-based, and it is always kept up to date with the latest development trends. Let us now shift our focus to pagination. 

Check out upGrad’s Advanced Certification in Blockchain

Read: AngularJS Interview Questions & Answers

What is Pagination?

As we alluded to a little earlier in the piece, all websites can’t display all their information on a single page. While a single page is indeed the preferred choice, using multiple pages in situations in which a single page website isn’t an option can deliver several benefits, including easy site navigation, improved user experience, and others.

All websites, especially eCommerce websites like Flipkart, can’t list all their products and display all the necessary information on a single page. This is where pagination comes into the picture. It allows content, in the form of text, images, and more, to be split into multiple pages if required. Learn more about using AngularJS for web development.

There are several scenarios where pagination comes in really handy. If your website features huge chunks of information, including blogs, graphs, or charts relating to a similar category or data set, you can split this information using pagination and improve navigation and readability. 

Pagination in Angular JS

There are several ways of displaying data on a website or any web application. Lists and tables are the most common elements that most people use to display information that is easy to read and understand. In Angular applications, ng-repeat feature is used to display information in lists or tables. However, this only works when the data being displayed isn’t too large. For larger data sets, features like sort, search, and pagination make tables and lists more manageable and applications more user-friendly. 

Angular JS pagination may appear more difficult than pagination in Laravel, Code PHP, and other frameworks to people who aren’t very well aware of the implementation approach that needs to be followed. You can use pagination along with searching and sorting features for listing records in an easy-to-navigate and easy-to-read format.

You can use third-party angular libraries to cover simple lists into multiple pages with sorting and searching features. The most preferred third-party library for this purpose is dirPagination. This library is easily accessible and very easy to use. It can be used for angular versions lower than angular 2. If you are using angular 2, you will separate components available to you within the internal library to add sorting, searching, and pagination.

If you want to display more than 200 records and are using, for instance, angular 1.4, you will find the dirPagination library to be faster than other such libraries and high on performance as well. It is a plug-n-play library that doesn’t need the Angular JS Controller to run any logic or set up command. In addition, it works well with Bootstrap as well. 

upGrad’s Exclusive Software Development Webinar for you –

SAAS Business – What is So Different?

Pagination in Angular JS with Example

Here’s a code to show pagination in Angular JS.

Source: (https://gist.github.com/kmaida/06d01f6b878777e2ea34)

<!DOCTYPE HTML>

<html lang=”en” ng-app=”myApp”>

<head>

<meta charset=”utf-8″>

<title>Dynamic Pagination w/ Filtering</title>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<meta name=”description” content=””>

<meta name=”author” content=”Kim Maida”>

 

<!– JS Libraries –>

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js” type=”text/javascript”></script>

<script src=”http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js” type=”text/javascript”></script>

 

<!– Angular Scripts –>

<script src=”script.js” type=”text/javascript”></script>

 

<!– Bootstrap –>

<link rel=”stylesheet” type=”text/css” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css” />

</head>

<body>

<div ng-controller=”PageCtrl”>

<div ng-controller=”PageCtrl”>

<label>Search:</label> <input type=”text” ng-model=”search.name” placeholder=”Search” />

<br />

<label>Filter by Category:</label>

<ul>

<li><a href=”” ng-click=”search.category=’engineering'”>Engineering</a></li>

<li><a href=”” ng-click=”search.category=’management'”>Management</a></li>

<li><a href=”” ng-click=”search.category=’business'”>Business</a></li>

</ul>

<label>Filter by Branch:</label>

<ul>

<li><a href=”” ng-click=”search.branch=’West'”>West</a></li>

<li><a href=”” ng-click=”search.branch=’East'”>East</a></li>

</ul>

<p><strong><a href=”” ng-click=”resetFilters()”>Show All</a></strong></p>

<h1>Items</h1>

<ul>

<li ng-repeat=”item in filtered = items | filter:search | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit”>{{item.name}}</li>

</ul>

<pagination page=”currentPage” max-size=”noOfPages” total-items=”totalItems” items-per-page=”entryLimit”></pagination>

</div>

</body>

</html>

 

app.js (Source: https://gist.github.com/kmaida/06d01f6b878777e2ea34)

var app = angular.module(‘myApp’, [‘ui.bootstrap’]);

app.filter(‘startFrom’, function () {

return function (input, start) {

if (input) {

start = +start;

return input.slice(start);

}

return [];

};

});

app.controller(‘PageCtrl’, [‘$scope’, ‘filterFilter’, function ($scope, filterFilter) {

$scope.items = [{

“name”: “name 1”,

“category”: [{

“category”: “management”

}, {

“category”: “business”

}],

“branch”: “West”

}, {

“name”: “name 2”,

“category”: [{

“category”: “engineering”

}],

“branch”: “West”

}, {

“name”: “name 3”,

“category”: [{

“category”: “management”

}, {

“category”: “engineering”

}],

“branch”: “West”

}, {

“name”: “name 4”,

“category”: [{

“category”: “management”

}, {

“category”: “business”

}],

“branch”: “West”

}, {

“name”: “name 5”,

“category”: [{

“category”: “management”

}, {

“category”: “business”

}],

“branch”: “East”

}, {

“name”: “name 6”,

“category”: [{

“category”: “management”

}, {

“category”: “business”

}],

“branch”: “East”

}, {

“name”: “name 7”,

“category”: [{

“category”: “management”

}, {

“category”: “business”

}],

“branch”: “East”

}, {

“name”: “name 8”,

“category”: [{

“category”: “business”

}],

“branch”: “West”

}, {

“name”: “name 9”,

“category”: [{

“category”: “management”

}, {

“category”: “business”

}],

“branch”: “East”

}, {

“name”: “name 10”,

“category”: [{

“category”: “management”

}],

“branch”: “East”

}, {

“name”: “name 11”,

“category”: [{

“category”: “management”

}, {

“category”: “business”

}],

“branch”: “East”

}, {

“name”: “name 12”,

“category”: [{

“category”: “engineering”

}],

“branch”: “West”

}, {

“name”: “name 13”,

“category”: [{

“category”: “management”

}, {

“category”: “business”

}],

“branch”: “West”

}, {

“name”: “name 14”,

“category”: [{

“category”: “engineering”

}],

“branch”: “East”

}, {

“name”: “name 15”,

“category”: [{

“category”: “management”

}, {

“category”: “engineering”

}],

“branch”: “East”

}, {

“name”: “name 16”,

“category”: [{

“category”: “management”

}],

“branch”: “West”

}, {

“name”: “name 17”,

“category”: [{

“category”: “management”

}],

“branch”: “East”

}, {

“name”: “name 18”,

“category”: [{

“category”: “business”

}],

“branch”: “West”

}, {

“name”: “name 19”,

“category”: [{

“category”: “business”

}],

“branch”: “West”

}, {

“name”: “name 20”,

“category”: [{

“category”: “engineering”

}],

“branch”: “East”

}, {

“name”: “Peter”,

“category”: [{

“category”: “business”

}],

“branch”: “East”

}, {

“name”: “Frank”,

“category”: [{

“category”: “management”

}],

“branch”: “East”

}, {

“name”: “Joe”,

“category”: [{

“category”: “business”

}],

“branch”: “East”

}, {

“name”: “Ralph”,

“category”: [{

“category”: “management”

}, {

“category”: “business”

}],

“branch”: “East”

}, {

“name”: “Gina”,

“category”: [{

“category”: “business”

}],

“branch”: “East”

}, {

“name”: “Sam”,

“category”: [{

“category”: “management”

}, {

“category”: “engineering”

}],

“branch”: “East”

}, {

“name”: “Britney”,

“category”: [{

“category”: “business”

}],

“branch”: “West”

}];

Explanation

The code used above will display the names of students against their respective category or subject of education along with their geography. The Angular JS pagination feature will allow these details to be mentioned in a tabular format, on multiple pages. This is how you sort information and make it more presentable for the user. This is arguably the easiest way of improving user experience for your web applications.

So, if you are a web developer, you should not delay learning it as efficiently as they can. And with the above arguments given above on why AngularJS is an ideal tool in the present-day tech world, you have all the explanations to go ahead!

If you’re interested to know more about AngularJS, Full-stack development, check out upGrad & IIIT-B’s PG Diploma in Full-stack Software Development which is designed for working professionals and offers 500+ hours of rigorous training, 9+ projects and assignments, IIIT-B Alumni status, practical hands-on capstone projects & job assistance with top firms.