How to create Pagination using dirPagination directive in Angularjs
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" >category.json
<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" : "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"
}
]
