Angular Pagination

Hello friends, now a day’s very fast and two ways bindings are most important for user experience wise, For do this the applications are develop in AngularJs framework. In AngularJs we need to create javascript (.js) file and (.html) file. You can bind data on UI is very easy, you can use $scope variable from controller and then bind it on UI. If data’s are many more than we must provide a pagination because user can show 10 data only, if user want to show other 10 data then click on pagination of second number then it will show other 10 data. Pagination is most important for managing more data. If you apply pagination for managing data, you has must write the very long code but in AngularJs you can apply pagination very simple and easy way. There so many directives are available to manage pagination in AngularJs. Here we will see angular pagination with their directive.

Step 1

Open visual studio and create new empty project, When empty project is created then we must install the angularjs package in our project because we do the angular pagination. So first of all install the angularjs package. For install angularjs package right click on project name and click on “Manage NuGet Packages” option then select online option then search angularjs in searchbox, there so many angularjs packages and so many versions are available so you must select first package of them.

Step 2

You has select first package from “Manage NuGet Packages” then it will automatically create Scripts folder in our project folder. You can see angular.js file and angular.min.js file in Scripts folder. There are so many angular related files are available like (“angular-animate.js”,” angular-cookies.js”, etc). If AngularJs files are installed in Scripts folder then download other one (.js)file that is “dirPagination”.

Step 3

Download the “dirPagination” file from professional site. Now, create one folder that is lib (folder) because downloaded “dirPagination” file put in lib (folder). This file is most important for apply pagination, there other library also available for do pagination.

Step 4

In AngularJs, you must create “Module”, “Controller”, “Service”, and “.html” files. So we need to create that all files that are mentions. First of all we create “Module” file like (app.js) then create “Controller” (paginationController.js) file and then create “html” (Index.html) file. These all files are create in one folder, so first we create one folder (app).

Step 5

After (app) folder is created then create “Module” file with modular name “angularTable”. In modular file we must import the package name that is “angularUtils.directives.dirPagination”. you can see below code to import package name in modular file.

var app = angular.module(‘angularTable’,[‘angularUtils.directives.dirPagination’]);

Step 6

A modular file created then second create controller (“paginationController”) in app folder because (.html) is connect with controller. In controller we are do our logical work and store in “$scope” variable and using this variable that data bind in (.html) page. In controller we must inject the (“$scope”).

app.controller('paginationController',['$scope', function ($scope) {
   
    $scope.userList = [
            { "Name": "Johns", "Email": "Johns@gmail.com", "src": "images/image.jpg" },
            { "Name": "Vin", "Email": "Vin@yahoo.com", "src": "images/img1.jpg" },
            { "Name": "Steven", "Email": "Steven@hotmail.com", "src": "images/img2.jpg" },
            { "Name": "Dane", "Email": "Dane@rock.com", "src": "" },
            { "Name": "Jonsan", "Email": "", "src": "images/img3.jpg" },
            { "Name": "Rock", "Email": "Rock@rocks.com", "src": "images/pic.jpg" },
            { "Name": "Santh", "Email": "", "src": "" }
    ];
}]);

Step 7

we have created “Module” and “Controller” file in app folder, now it’s time to create .html page for binding data. In .html file we need to inject angular.js file, second is dirPagination.js file, and third is inject “Module” file (app.js) and fourth is controller (paginationController). All the files inject in tag. You can see it below.

<div>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js">
</script>
 <script src="../lib/dirPagination.js"></script>
 <script src="app.js"></script>
 <script src="paginationController.js"></script>
 </head>
</div>

Step 8

we have injected required files in .html file, now we have to inject module name in or

tag and then inject controller in

tag. We will use table for display data. We use “ng-app” for inject module and second use “ng-controller” for inject controller.

<body ng-app="angularTable">
    <div ng-controller="paginationController">
    </div>
</body>

Step 9

we have use table for binding data we also use “Bootstrap” classes, if you want to use bootstrap classes in .html file so you must include the bootstrap.css and bootstrap.js file in tag.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
 </script>
<link
rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

Will see how we bind $scope.userList data in .html page using “dir-paginate” directive and second is . We have used any other attribute also like “itemsPerPage: 3” and “orderBy:sortType:reverse”.

<body ng-app="angularTable">
<div ng-controller="paginationController">       
<table class="table table-striped">
<thead>
<tr>
<th><a href="" ng-click="sortType='Name';reverse=!reverse">Name</a></th>
<th><a href="" ng-click="sortType='Email';reverse=!reverse">Email</a></th>
<th></th>
</tr>
</thead>
<tbody>
<tr dir-paginate="user in userList|itemsPerPage: 3|orderBy:sortType:reverse | filter:search">
<td>{{ user.Name}}</td>
<td>{{user.Email || 'Email Not Available'}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls boundary-links="true" direction-links="true">
</dir-pagination-controls>
</div>
</body>

In above code first we have inject the module name then inject the controller name then create table if table is created then we have set table heading “Name” and “Email”. Create table body then in table body create table row in table row we use “dir-apginate” in this we have create object of variable employees that is “employee” and then set “itemsPerPage”, this one show only 3 item on first screen or first table. After end of table we have set “” with attribute of “boundary-links” and “direction-links” and set “True” in both attributes. Here we have saw “angular pagination”.