Cara Membuat Pagination Menggunakan AngularJS
Halo teman teman di panduan kali ini saya akan membahas mengenai Cara Membangun Pagination Menggunakan AngularJS, Paging atau Pagination itu sendiri berfungsi bagi membagi jumlah postingan yang ingin kita tampilkan di halaman, Pagination digunakan bagi mengurangi scrolling window maksudnya yaitu, apabila kita mempunyai data yang banyak, kita dapat menampilkan beberapa data saja di setiap halamannya.
Dengan menggunakan Pagination kita dapat menampilkan jumlah data di setiap halaman, misalkan kita mempunyai 50 data, dan apabila ditampilkan semuanya karenanya data tersebut dapat mengurangi performa dari blog yang kita bikin, bagi mengatasi itu seluruh kita dapat mengunakan Pagination, jadi kita dapat menampilkan beberapa data saja di setiap halamannya, dan bagi data yang lainya kita dapat menampilkannya di halaman berikutnya.
Oke teman teman saya rasa telah lumayan paham ya mengenai Pagination, nah sekang kita akan seketika saja masuk ke study casenya mengenai Cara Membangun Pagination Menggunakan AngularJS.
Bagi merancang Pagination Menggunakan AngularJS, langkah pertama-tama yang kita bikin 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 bikin 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 apabila kita jalankan di browser karenanya hasilnya akan seperti dibawah ini,
Oke teman teman demikian dulu panduan saya kali ini mengenai Cara Membangun Pagination Menggunakan AngularJS, semoga bermanfaat.
Terimakasih.
Sumber https://kursuswebsite.org
