How To Build Pagination in AngularJS

Pagination in one of the most important and essential component in any web based application. It is the process of dividing data into small groups and creating pages to display each of these groups.

In this tutorial, we are going to use AngularJS to paginate the data. For this tutorial, we are going pagination directive by Michael Bromley.

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>AngularJS Pagination</title>
	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
	<script src="angular.min.js"></script>
	<script src="dirPagination.js"></script>
	<script src="app.js"></script>
</head>
<body>
	<div class="container" ng-app="myApp">
		<div ng-controller="countryCtrl">
			<table class="table">
			    <thead>
					<tr>
						<th>Country</th>
						<th>City</th>
					</tr>
			    </thead>
				<tbody>
					<tr dir-paginate="item in items | itemsPerPage: 5">
						<td>{{ item.country }}</td>
						<td>{{ item.city }}</td>
					</tr>
				</tbody>
  			</table>
  			<dir-pagination-controls
  				boundary-links="true"
  				direction-links="true"
  			></dir-pagination-controls>
		</div>
	</div>
</body>
</html>

As you can see, we are using bootstrap to style our page. Apart from that we have included following Javascript files,

  1. angular.min.js (Core AngularJS file)
  2. dirPagination.js (Pagination Directive)
  3. app.js (Custom JavaScript file which contains code for our application)

Within our HTML code we are using dir-paginate directive instead of regular ng-repeat directive and to display pagination itself we are using dir-pagination-controls directive. The itemsPerPage attribute for dir-paginate directive states the total number of items which will be displayed on each page. The direction-links attribute for dir-pagination-controls directive used to determine whether to show next and previous arrows and the boundary-links attribute is used to determine if we want to display arrows which points first and last pages. Items variable contains data which it is retrieving from JSON file.

JavaScript:

var app = angular.module('myApp',['angularUtils.directives.dirPagination']);

app.controller('countryCtrl', ['$scope','$http', function($scope, $http){
    $scope.items = [];
    $http.get("country.json").success(function(response){ 
        $scope.items = response;
    });
}]);

As you can see in our JavaScript code we have added angularUtils.directives.dirPagination as a dependency to our application. We have created an scope variable items which will hold our data. Then, we are using $http object to fetch data from country.json file. We are going to store the response i.e the data fetched from country.json inside items variable.

JSON:

[
	{
		"country"	: 	"India",
		"city"		: 	"Pune"
	},
	{
		"country"	: 	"Canada",
		"city"		: 	"Waterloo"
	},
	{
		"country"	: 	"Russia",
		"city"		: 	"Moscow"
	},
	{
		"country"	: 	"France",
		"city"		: 	"Paris"
	},
	{
		"country"	: 	"Japan",
		"city"		: 	"Tokoyo"
	},
	{
		"country"	: 	"New Zealand",
		"city"		: 	"Auckland"
	},
	{
		"country"	: 	"Nepal",
		"city"		: 	"Kathmandu"
	},
	{
		"country"	: 	"United Kingdom",
		"city"		: 	"London"
	},
	{
		"country"	: 	"Brazil",
		"city"		: 	"Rio De Janeiro"
	},
	{
		"country"	: 	"Peru",
		"city"		: 	"Lima"
	},
	{
		"country"	: 	"Chile",
		"city"		: 	"Santiago"
	},
	{
		"country"	: 	"Germany",
		"city"		: 	"Berlin"
	},
	{
		"country"	: 	"China",
		"city"		: 	"Beijing"
	},
	{
		"country"	: 	"Thailand",
		"city"		: 	"bangkok"
	},
	{
		"country"	: 	"South Korea",
		"city"		: 	"Seoul"
	},
	{
		"country"	: 	"Belgium",
		"city"		: 	"Brussels"
	},
	{
		"country"	: 	"Spain",
		"city"		: 	"Madrid"
	},
	{
		"country"	: 	"Netherlands",
		"city"		: 	"Amsterdam"
	}
]

Our JSON file contains a list of countries and cities which we have hardcoded inside that file. In your case it might come from the database or from an api.

Read Also: Limit the length of a string with AngularJS

So, in the way we can create a basic pagination using AngularJS. If you have any queries or suggestions, please let me know in the comment section.

0 Comments

Leave a Comment.