In this blog I will try to explain about using Angular pagination directive in a .Net project with the help of an example.
Please follow the following steps to implement dir-pagination directive in your project:
Step 1: Download dirPagination.js . You can download it from the following link:
Download
Step 2: Now include the angular/Pagination js scripts in your project, example as follows:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="Scripts/dirPagination.js"></script>
Step 3: Now write the following code in you angular controller:
angular.module('paginationApp', ['angularUtils.directives.dirPagination'])
.controller('DemoCtrl', function ($scope, $http) {
$scope.users = [{ id: 1, name: "Mayank", hobby: "Swimming" }, { id: 2, name: "Shubham", hobby: "Singing" }, { id: 3, name: "Hina", hobby: "Dancing" }, { id: 4, name: "Shikha", hobby: "Reading" }, { id: 5, name: "Deepika", hobby: "Driving" },
{ id: 6, name: "Ajendra", hobby: "Eating" }, { id: 7, name: "Manvendra", hobby: "Exploring" }, { id: 8, name: "Abhishek", hobby: "Laughing" }, { id: 9, name: "Chetan", hobby: "Singing" }, { id: 10, name: "Mona", hobby: "Sleeping" }]
});
Here: $scope.users contains the data that is to be paginated
Step 4: Now write the following code inside the body tag:
<div ng-controller="DemoCtrl">
<table cellpadding="1" cellspacing="1" border="1" align="center">
<tr>
<td>ID</td>
<td>Name</td>
<td>Hobby</td>
</tr>
<tr dir-paginate="user in users|itemsPerPage:3" current-page="2">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.hobby}}</td>
</tr>
<tr>
<dir-pagination-controls direction-links="true" boundary-links="true"> </dir-pagination-controls>
</tr>
</table>
</div>
Here: As you can see instead of ng-repeat we are using dir-paginate, itemsPerPage represents the items to be displayed per page (We are displaying 3 items per page) and the current-page tells the default page to be displayed onload (We are displaying the second-page onload). At the end we are using dir-pagination-controls directive this will give the control menu with next and previous links to switch among the pages.
Step 5: Now run the project your pagination is ready for action
Summing up the code..:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body ng-app="paginationApp">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="Scripts/dirPagination.js"></script>
<div ng-controller="DemoCtrl">
<table cellpadding="1" cellspacing="1" border="1" align="center">
<tr>
<td>ID</td>
<td>Name</td>
<td>Hobby</td>
</tr>
<tr dir-paginate="user in users|itemsPerPage:3" current-page="2">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.hobby}}</td>
</tr>
<tr>
<dir-pagination-controls direction-links="true" boundary-links="true"> </dir-pagination-controls>
</tr>
</table>
</div>
<script>
angular.module('paginationApp', ['angularUtils.directives.dirPagination'])
.controller('DemoCtrl', function ($scope, $http) {
$scope.users = [{ id: 1, name: "Mayank", hobby: "Swimming" }, { id: 2, name: "Shubham", hobby: "Singing" }, { id: 3, name: "Hina", hobby: "Dancing" }, { id: 4, name: "Shikha", hobby: "Reading" }, { id: 5, name: "Deepika", hobby: "Driving" },
{ id: 6, name: "Ajendra", hobby: "Eating" }, { id: 7, name: "Manvendra", hobby: "Exploring" }, { id: 8, name: "Abhishek", hobby: "Laughing" }, { id: 9, name: "Chetan", hobby: "Singing" }, { id: 10, name: "Mona", hobby: "Sleeping" }]
});
</script>
</body>
</html>
Hope it helps... Happy Coding..!
0 Comment(s)