How to create Pagination using dirPagination directive in Angularjs example with demo ?

By Hardik Savani | July 7, 2016 | | 104122 Viewer | Category : Bootstrap AngularJS


Angularjs Pagination is not simple like laravel, code php etc, because we have to manage it with JS. In this tutorial i give you to build simple way pagination in your angularjs application.

In this example we will use dirPagination directive to add paginate. Pagination Directive provide us very simple way to create paginate like set itemsPerPage, dir-pagination-controls etc. In this example you can see how it simple. You can get more information about Pagination Directive from here : Click Here.

If you don't know more about angularjs then also you can perform simply, I added one html file and another for json data, so create html file and put bellow code and 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>

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"

}

]



Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.