MCQ

Create Pagination using dirPagination directive in Angularjs

In this section, we will use AngularJS to create pagination with the help of dirPagination directives. It is not simple to implement angularjs pagination, just like code php, laravel, etc. Because it is a little bit difficult to manage it with JS. In our below example, we will use AngularJS application to simply build the pagination. AngularJS is a type of JavaScript framework that can be used to build web applications. It is mostly used in the project, which has Single page application. It has the capability to respond very quickly to the user actions by extending additional attributes of HTML DOM. Thousands of developers used it around the world because it is completely free and open source.

In our example, we will add paginate by using the dirPagination directive. We will simply create paginate as dir-paginate-controls, set itemPerPage, and many more by using the paginate directive. In our previous project, we were doing listing and pagination by using the angular database. In this case, if we try to enter 200 records, it will become very slow. So in this project, we will use very famous library for pagination, which is very fast and has excellent performance. When we work on our angularjs controller, the dirPagination directive does not require any type of logic and setup because it is a truly plug n play library. It has the capability that it is also compatible with Bootstrap 3.

We can simply perform it no matter we have the knowledge of AngularJS or not. For this, we will first create one html file. After that, we will create another file for json data. In our index.html path, we create one html file and then add the following code. We will also create json file and then add the following code:

index.html

<html lang="en-US" >

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"> </script>
<script src="https://raw.githubusercontent.com/michaelbromley/angularUtils/master/src/directives/pagination/dirPagination.js"> </script>

<body>

<div ng-app="myApp">

	<h2 class="text-center"> Example of Pagination in Angularjs</h2>

    <div class="container" ng-controller="categoryCtrl">
		<table class="table table-bordered">
		    <thead>
				<tr>
					<th>Category</th>
				</tr>
		    </thead>
			<tbody>
				<tr dir-paginate="value in data | itemsPerPage: 5">
					<td>{{ value.category }}</td>
				</tr>
			</tbody>
		</table>
		<dir-pagination-controls 
			boundary-links="true" 
			direction-links="true" >
			</dir-pagination-controls>
	</div>

</div>

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

app.controller('categoryCtrl', ['$scope','$http', function($scope, $http){
    $scope.data = [];
    $http.get("category.json").success(function(response){ 
        $scope.data = response;
    });
}]);
</script>

</body>
</html>

category.json:

[
	{
		"category"	: 	"PHP"
	},
	{
		"category"	: 	"Laravel"
	},
	{
		"category"	: 	"Bootstrap"
	},
	{
		"category"	: 	"JQuery"
	},
	{
		"category"	: 	"Javascript"
	},
	{
		"category"	: 	"HTML"
	},
	{
		"category"	: 	"CSS"
	},
	{
		"category"	: 	"Facebook API"
	},
	{
		"category"	: 	"Packages"
	},
	{
		"category"	: 	"AngularJS"
	},
	{
		"category"	: 	"JS"
	},
	{
		"category"	: 	"Examples"
	},
	{
		"category"	: 	"API"
	},
	{
		"category"	: 	"Bootbox"
	},
	{
		"category"	: 	"Plugin"
	},
	{
		"category"	: 	"Node JS"
	},
	{
		"category"	: 	"Mailchimp API"
	},
	{
		"category"	: 	"Google API"
	}
]

Next TopicDynamically Add and Remove Form Fields in Angular

← prev next →