Programs

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. 

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. 

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. 

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. 

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.

What are the features of the Angular Js framework?

Angular Js is built over Model View Controller (MVC) architecture wherein the business logic, presentation, and application data are dealt with separately. Data binding is done automatically by the application. It provides us with a set of directives that helps to combine data with an HTML template. It offers maximum functionalities with the least amount of code. Its speed and performance are very high. Routing and navigation from one page to another are very smooth. Angular was developed for single-page applications; it avoids the loading required to move to a new page.

What does UTF-8 in the meta charset tag mean?

The meta tag is used to display the meta description of the website, and it shows the author's names page descriptions and gives information on what the website is about. Along with these, it also specifies the data types, character encoding, etc. A character set, that is, charset, defines the character encoding of an HTML document. UTF stands for Universal character set Transformation Format, and 8 denotes the number of bits. It can encode all characters of Unicode. Encoding means transforming machine code to a human-readable format and vice versa in the browser. This is the significance of UTF-8.

What is the significance of the Controller function in Angular Js?

The controller function in Angular Js is used to maintain, add, and delete application data. It attaches behaviors and states to HTML elements and scope objects. Multiple methods can be attached to the scope object within the controller. This might include event handlers that trigger an event in case of a mouse click, keyboard click, etc., and execute a method. The properties and methods are visible only to the current controller and its child elements. Complex objects can be attached, and nested controllers can also be created in which the child controller can access properties of the parent, but vice versa is not true. This is the significance of the controller in Angular Js.

Want to share this article?

Become a Full Stack Developer

UPGRAD AND IIIT-BANGALORE'S PG DIPLOMA IN SOFTWARE DEVELOPMENT
Register Now

Leave a comment

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

Leave a comment

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

×
Get Free career counselling from upGrad experts!
Book a session with an industry professional today!
No Thanks
Let's do it
Get Free career counselling from upGrad experts!
Book a Session with an industry professional today!
Let's do it
No Thanks