Cara Membuat Pagination Menggunakan AngularJS

Halo teman teman pada tutorial kali ini saya akan membahas tentang Cara Membuat Pagination Menggunakan AngularJS, Paging atau Pagination itu sendiri berfungsi untuk membagi jumlah postingan yang ingin kita tampilkan pada halaman, Pagination digunakan untuk mengurangi scrolling window maksudnya yaitu, apabila kita mempunyai data yang banyak, kita dapat menampilkan beberapa data saja pada setiap halamannya.

Dengan menggunakan Pagination kita dapat menampilkan jumlah data pada setiap halaman, misalkan kita mempunyai 50 data, dan jika ditampilkan semuanya maka data tersebut dapat mengurangi kinerja dari website yang kita buat, untuk mengatasi itu semua kita dapat mengunakan Pagination, jadi kita dapat menampilkan beberapa data saja pada setiap halamannya, dan untuk data yang lainya kita bisa menampilkannya pada halaman berikutnya.

Oke teman teman saya rasa sudah cukup paham ya tentang Pagination, nah sekang kita akan langsung saja masuk ke study casenya tentang Cara Membuat Pagination Menggunakan AngularJS.

Untuk membuat Pagination Menggunakan AngularJS, langkah pertama yang kita buat yaitu file index.html, dan silahkan teman teman simpan script dibawa ini dengan nama index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>angularjs ng-repeat pagination</title>
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'>
   <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js'></script>
   <script src="angular.js"></script>
   <style type="text/css">
     .cursor{cursor:pointer !important;}
     .input{width: 60%}
     .background{background: #e7e7e7; padding: 10px; border-radius: 10px; border: 2px solid black;}
   </style>
</head>

<body>
  <div class="container">
    <div class="col-md-4"></div>
     <div class="col-md-4 background">
      <div ng-app="myApp" ng-controller="MyCtrl">
        <input ng-model="q" id="search" class="form-control input" placeholder="search">
        <select ng-model="pageSize" id="pageSize" class="form-control input">
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="15">15</option>
            <option value="20">20</option>
         </select>
        <ul>
            <li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
                {{item}}
            </li>
        </ul>
        <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1" class="cursor">Back</button>
        {{currentPage+1}}/{{numberOfPages()}}
        <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-click="currentPage=currentPage+1" class="cursor">Next</button>
      </div>
      </div>
    <div class="col-md-4"></div>
  </div>
</body>
</html>

Berikutnya kita akan buat file module dan controllernya dan silahkan teman teman simpan script dibawah ini dengan nama angular.js

var app=angular.module('myApp', []);

app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.data = [];
    $scope.q = '';
    
    $scope.getData = function () {
      return $filter('filter')($scope.data, $scope.q)
    }
    
    $scope.numberOfPages=function(){
        return Math.ceil($scope.getData().length/$scope.pageSize);                
    }
    
    for (var i=0; i<40; i++) {
        $scope.data.push("data "+i);
    }
}]);

app.filter('startFrom', function() {
    return function(input, start) {
        start = +start;
        return input.slice(start);
    }
});

Nah jika kita jalankan pada browser maka hasilnya akan seperti dibawah ini,

Oke teman teman sekian dulu tutorial saya kali ini tentang Cara Membuat Pagination Menggunakan AngularJS, semoga bermanfaat.

Terimakasih.

Cara Membuat Pagination Menggunakan AngularJS

Kategori