Pagination with AngularJS (Part - 1)

Now a days in most of the projects the most common requirement is table pagination. We can do this concept by using any technology. But in this post I am going to show the pagination concept using AngularJS. Why we go for pagination is to reduce the page navigation and to increase the performance of the application.

Following are the step by step process to implement the concept of pagination in AngularJS,

Step 1:
First you need to design the template, so what you need to do is, just create a .HTML file with name pagination.html and add the following code to the file.

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
 <title>[ info ] | AngularJS Pagination</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <script src="script.js"></script>
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

 <style>
  table tr td{
   text-align: center;
  }
  table{
   border: 1px solid black;
   font-family: verdana;
  }
  table tr:nth-childundefinedodd) td{
   background: gainsboro;
  }
  table tr:nth-childundefinedeven) td{
   background: white;
  }
 </style>
</head>
<body>
<div class="container">
 <div class="row">
  <div ng-controller="myCtrl"> 
   <table class="table-bordered" border="0" cellspacing="0" cellpadding="15">
    <tr>
     <thead>
      <th> Name </th>
      <th> Mark </th>
      <th> Status </th>
     </thead>
     <tbody>
      <tr ng-repeat="x in names | firstPage:currentPage*pageSize | limitTo:pageSize">
       <td>{{ x.name }}</td>
       <td>{{ x.mark }}</td>
       <td>{{ x.status }}</td>
      </tr>
   </table>

   <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"><</button>
    {{currentPage+1}}/{{numberOfPagesundefined)}}</li>
   <button ng-disabled="currentPage >= names.length/pageSize - 1" ng-click="currentPage=currentPage+1">></button>
  </div>
 </div>
</div>
</body>
</html>

Step 2 :
After finishing above step, now create an other file and save it as script.js and then add the following javascript code,

var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope){
 $scope.names = [
     {name: 'Bikash',mark: 60,status: 'Pass'},
     {name: 'Smith',mark: 70,status: 'Pass'},
     {name: 'Prakash',mark: 82,status: 'Pass'},
     {name: 'Bibhas',mark: 90,status: 'Pass'},
     {name: 'Deepika',mark: 20,status: 'Fail'},
     {name: 'Akash',mark: 29,status: 'Fail'},
     {name: 'Rajesh',mark: 25,status: 'Fail'},
     {name: 'Shankar',mark: 45,status: 'Pass'},
     {name: 'Mahendra',mark: 75,status: 'Pass'},
     {name: 'Nath',mark: 05,status: 'Fail'}
    ];

 $scope.currentPage = 0;
 $scope.pageSize = 5;
 $scope.numberOfPages=function(){
 
  return Math.ceil($scope.names.length/$scope.pageSize); 
 }
});
//startFrom filter
app.filter('firstPage', function() {
 return function(input, start) {
  start = +start;
  return input.slice(start);
 }
});

Note :
In above code in step 2 we used Math.ceil(), you may have doubt about this function. So I am going to clarify the doubt, just you need to read about the function what I have describe below,

The ceil() method rounds a number UPWARDS to the nearest integer, and returns the result.
If the passed argument is an integer, the value will not be rounded.

Step 3 :
In this step we will test the App is working or not, so you have to create a folder and name it as PaginationApp and place the above two files, such as pagination.html and script.js into this folder. Then open the pagination.html file on browser to see the output.

Note :
Your folder structure should be just like below structure,

ProjectName(Folder Name)
|
|
|----------> pagination.html (Add code mentioned in step 1)
|
|----------> script.js (Add code mentioned in step 2)
|

Download Demo

Pagination with AngularJS (Part - 1)

Saturday 25 July 2015

1 comment:

Categories

Statistics

Followers