Pagination & Routing

client side pagination is described here.

by Samar Pattanayak

HTML

<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
    Pagination Demo
    <nbsp;></nbsp;>
    <nbsp;></nbsp;>
    <table>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Location</th>
      </tr>
      <tr ng-repeat="dat in data | mypagFilter:pageSize*currPage | limitTo:pageSize">
        <td>{{dat.id}}</td>
        <td>{{dat.name}}</td>
        <td>{{dat.location}}</td>
      </tr>
    </table>
    <div>

      <input type="button" id="btnPrev" ng-click="clickPrev()" class="buttonCss" value="Prev <<" ng-disabled="currPage==0" /> Page {{currPage+1}} of {{pageSizeCal()}}
      <input type="button" id="btnNext" ng-click="clickNext()" class="buttonCss" value="Next >>" ng-disabled="currPage+1== pageSizeCal()" />

    </div>
    <input type="button" value="Ignore it & go to bottom" ng-click="check('divBtm')" ng-show=true style="opacity:0.2" />
    <div style="margin-top:30px">
      <a href="#">Present At Home</a>
      <a href="#/Contact/2">ContactDetails</a>
    </div>
    <div>
      <div ng-view>

      </div>
      <script type="text/ng-template" id="home.html">
        <h3>Wlcome to Angular.com</h3>
      </script>
      <script type="text/ng-template" id="contact.html">
        <div id="divContact">
          Name : <span ng-bind="contactDetail.name"></span></br>
          <img id="img1" alt="No Image available" /></br>
          Cell : +91 - <span ng-bind="contactDetail.number"></span></br>
          Email : <span style="text-decoration:underline" ng-bind="contactDetail.email"></span></br>
        </div>       
      </script>
       <div id="divBtm" style="margin-top:500px">
         bottom
       </div>
    </div>
  </div>
</div>

CSS

table,
th,
td {
  border: 1px solid green;
}

th,
td {
  width: 100px;
  text-align:center;
}

#btnPrev {
  margin-left: 50px;
  margin-top: 10px;
}

.buttonCss {
  border-radius: 7px;
  background-color: #ffbf00;
  height: 25px;
}

a {
  text-decoration: none;
  border: 0.5px solid black;
  margin-left: 30px;
  border-radius: 10px;
}

#divContact {
  border-radius: 15px;
  border: 0.5px solid black;
  margin-top: 20px;
  padding-top: 10px;
  height: 100px;
  text-align: center;
  width: 280px;
  margin-left:20px;
}
a:active,a:visited{
  background-color:red;
}
a:hover{
  background-color:green;
}

JavaScript

var app = angular.module("myApp", ['ngRoute'])
  .controller("myController", function($scope,$location,$anchorScroll) {


    $scope.data = [{
      id: 1,
      name: 'AB',
      location: 'Tokyo'
    }, {
      id: 2,
      name: 'AC',
      location: 'Japan'
    }, {
      id: 3,
      name: 'BD',
      location: 'Berlin'
    }, {
      id: 4,
      name: 'BE',
      location: 'Sydney'
    }, {
      id: 5,
      name: 'CA',
      location: 'Delhi'
    }, {
      id: 6,
      name: 'CB',
      location: 'Melbourne'
    }, {
      id: 7,
      name: 'Deb',
      location: 'Bhubaneswar'
    }, {
      id: 8,
      name: 'Sam',
      location: 'Hyderabad'
    }, {
      id: 9,
      name: 'Anil',
      location: 'Qatar'
    }, {
      id: 10,
      name: 'Viraj',
      location: 'Frankfrut'
    }, {
      id: 11,
      name: 'Rajeev',
      location: 'Newyork'
    }, {
      id: 12,
      name: 'Sri',
      location: 'Dubai'
    }, {
      id: 13,
      name: 'Kp',
      location: 'Chandigarh'
    }, {
      id: 14,
      name: 'Milan',
      location: 'Sanghai'
    }, {
      id: 15,
      name: 'Sourav',
      location: 'Norway'
    }];
    $scope.currPage = 0;
    $scope.pageSize = 3;
    $scope.check = function(divId) {
      //alert(Math.ceil($scope.data.length / $scope.pageSize));
      $location.hash(divId);
      $anchorScroll();
    };
    
    $scope.pageSizeCal = function() {
      var pagesizefinal = Math.ceil($scope.data.length / $scope.pageSize);
      return pagesizefinal;
    };
    
    $scope.clickNext = function() {
      if ($scope.currPage + 1 < Math.ceil($scope.data.length / $scope.pageSize)) {
        //alert($scope.data.slice($scope.currPage*$scope.pageSize)[0].id);
        $scope.currPage = $scope.currPage + 1;
      }

    };
    
    $scope.clickPrev = function() {
      if ($scope.currPage > 0) {
        //alert($scope.data.slice($scope.currPage*$scope.pageSize)[0].id);
        $scope.currPage = $scope.currPage - 1;
      }

    };
 ...