How to create Pagination using dirPagination directive in Angularjs example with demo ?
In this post we will give you information about How to create Pagination using dirPagination directive in Angularjs example with demo ?. Hear we will give you detail about How to create Pagination using dirPagination directive in Angularjs example with demo ?And how to use it also give you demo for it if it is necessary.
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 >AngularJS Pagination Example</h2>
<div ng-controller="categoryCtrl">
<table >
<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"
}
]
Hope this code and post will helped you for implement How to create Pagination using dirPagination directive in Angularjs example with demo ?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs