Cara Membuat Tabel Paging Sederhana Dengan AngularJs

Pembahasan kemarin pada artikel yang berjudul tentang Cara Membuat Tabel Paging Dengan Ng-option AngularJs saya sudah membahas pengertian dari table paging. Nah untuk kesempatan kali ini masih seputar Cara Membuat Tabel Paging Sederhana Dengan AngularJs. Yang membedakan pada artikel sebelumnya tentang table paging hanya konsep pagingnya. Untuk table paging disini saya menggunakan empat tombol. Yang berfungsi untuk melihat data yang pertama, terakhir, selanjutnya dan sebelumnya.

Cara Membuat Tabel Paging Sederhana Dengan AngularJs langkah pertama tentu harus membuat struktur htmlnya. Struktur yang saya pakai disini tidak jauh beda dengan sebelumnya. Yang berbeda hanya tag select yang saya ganti dengan empat tombol seperti pada script di bawah ini.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
	<title> Cara Membuat Tabel Paging Sederhana Dengan AngularJs</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
</head>
<body ng-controller="myPaging">
	<table border="1" cellspacing="0">
		<tr ng-repeat="dn in dataPost" ng-if="$index >= (currentpage*pagesize) && $index < ((currentpage+1)*pagesize)">
			<td>{{dn.id}}</td>
			<td>{{dn.title}}</td>
		</tr>
	</table>
	<button ng-click="currentpage=0">first</button>
	<button ng-click="paging(0)">prev</button>
	<button ng-click="paging(1)">next</button>
	<button ng-click="currentpage=pagenumber-1">last</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title> Cara Membuat Tabel Paging Sederhana Dengan AngularJs</title>

</head>

<tr ng-repeat="dn in dataPost" ng-if="$index >= (currentpage*pagesize) && $index < ((currentpage+1)*pagesize)">

<td>{{dn.title}}</td>

</tr>

</table>

<button ng-click="currentpage=0">first</button>

</body>

</html>

Lalu dilanjut dengan membuat sebuah function untuk ambil data dari json placeholder. Untuk data yang akan dicetak teman-teman bebas ya. Tidak harus dari json placeholder tapi boleh juga dari database yang teman-teman punya.

var modul = angular.module("myApp",[]);
	modul.factory("factoryData", function($http){
    	var factoryData = {};
         factoryData.getData = function(){
                                return $http.get('https://jsonplaceholder.typicode.com/posts');
                                };
    	 return factoryData;
    });

var modul = angular.module("myApp",[]);

modul.factory("factoryData", function($http){

var factoryData = {};

factoryData.getData = function(){

return $http.get('https://jsonplaceholder.typicode.com/posts');

};

return factoryData;

});

Dan kemudian teman-teman buat controller angularjs untuk menjalankan tombol pev dan next seperti pada script di bawah ini.

modul.controller("myPaging", function($scope, factoryData){
	factoryData.getData().then(function(response){
            $scope.dataPost = response.data;
            $scope.pagesizes = [5, 10, 15, 20];
			$scope.pagesize = $scope.pagesizes[0];
			$scope.currentpage = 0;
			$scope.pagenumber = Math.ceil($scope.dataPost.length / $scope.pagesize);
			$scope.paging = function(type){
				if(type == 0 && $scope.currentpage > 0){
					--$scope.currentpage;
				}else if(type == 1 && $scope.currentpage < $scope.pagenumber-1){
					++$scope.currentpage;
				}
			}
       });		
});

modul.controller("myPaging", function($scope, factoryData){

factoryData.getData().then(function(response){

$scope.dataPost = response.data;

$scope.pagesizes = [5, 10, 15, 20];

$scope.pagesize = $scope.pagesizes[0];

$scope.currentpage = 0;

$scope.pagenumber = Math.ceil($scope.dataPost.length / $scope.pagesize);

$scope.paging = function(type){

if(type == 0 && $scope.currentpage > 0){

--$scope.currentpage;

}else if(type == 1 && $scope.currentpage < $scope.pagenumber-1){

++$scope.currentpage;

}

});

Saya hanya akan menjelaskan tentang variable dari $scope.paging, karena untuk variable scope yang lain sudah saya jelaskan pada artikel tentang Cara Membuat Tabel Paging Dengan Ng-option AngularJs. Untuk $scope.paging disini kita buat sebuah fungsi didalamnya untuk melakukan pengecekkan tombol prev dan next menggunakan parameter yang nanti jika parameter dari type == 0 dan $scope.currentpage > 0 maka $scope.currentpage akan dikurangi 1 seterusnya dan jika type == 1 dan $scope.currentpage < $scope.pagenumber-1 maka $scope.currentpage akan bertambah 1 seterusnya.

Demikian artikel tentang Cara Membuat Tabel Paging Sederhana Dengan AngularJs. Semoga dapat bermanfaat dan selamat mencoba.

Facebook DUMET School

Categories