How to create Pagination using dirPagination directive in Angularjs?

Today now in this post i will show you How to create Pagination using dirPagination directive in Angularjs?We know that angularjs pagination is not simple as like laravel, code php etc, because we need to manage this with JS. Now in this tutorial i will give an example of how we can build a simple pagination in our angularjs application.

Now in this example i will use dirPagination directive to add the paginate. We know pagination directive provide us a very simple way how to create paginate as like as set itemsPerPage, dir-pagination-controls etc. So in this example we can see how it simple. we can get more the information about the Pagination Directive from here : Click Here.

So if we don’t know more about the angularjs then also we can perform simply, I will added one html file and the another for json data, so it will create html file and put the bellow code and the another create json file and put that code and check you can also check demo.

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">AngularJS Pagination Example</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>

Read Also : How to Create Custom Blade Directive in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook.

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →