AngularJS Pagination using dirPagination Directive Example
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"
}
]
