Today we are going to see how to add the pagination to the table in angular js application there are many different ways to do it but I do it using the pagination library on GitHub. GitHub is one of the best platforms for the developers there are lots of libraries created by the developers like us we can use them instead of creating out on our own using the existing thing is much better and time-saving
The link to the library is here dirpagination.
Lets start
<html data-ng-app="app">
<head>
<script src="…\angular.min.js"></script>
<script src="…\dirPagination.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"/>
<script >
var app = angular.module('app', ['angularUtils.directives.dirPagination']);
app.controller('MyCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.items = [
{
name: "ram",
age: "23"
},
{
name: "vijay",
age: "25"
},
{
name: "sham",
age: "24"
},
{
name: "raju",
age: "59"
},
{
name: "babu j",
age: "20"
},
{
name: "kml r",
age: "12"
}
]
}]);
</script>
</head>
<body>
<h1 class="page-header" style="text-align:center">Basic Angular App</h1>
<div class="container" data-ng-controller="MyCtrl">
<div class="container">
<div class="row">
<div class="col-sm-2">Search</div>
<div class="col-sm-2">
<input type="text" class="form-control input-sm" data-ng-model="txtSearch">
</div>
</div>
</div>
<hr>
<div class="container">
<table class="table table-responsive table-hover table-bordered">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr dir-paginate="item in items | itemsPerPage: 5 | filter : txtSearch">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
<dir-pagination-controls></dir-pagination-controls>
</div>
</div>
</body>
</html>
In the above example we have used the dirPagination.js for the pagination but we need to replace the data-ng-repeat which we use to bind the data to the table to dir-paginate we can also see that we have used the itemsPerPage: 5 and also there are many different options in that directive ex-
<dir-pagination-controls
[max-size=""]
[direction-links=""]
[boundary-links=""]
[on-page-change=""]
[pagination-id=""]
[template-url=""]
[auto-hide=""]>
</dir-pagination-controls>
In that way, we can add the pagination in angular application for better understanding of the directive go through the documentation
No comments:
Post a Comment