Cara Membuat Tabel Paging Nomor Dengan AngularJs Part1

Pada kesempatan kali ini saya masih tertarik untuk membahas table paging. Seperti yang sudah saya jelaskan apa itu table paging pada artikel sebelumnya dengan judul Cara Membuat Tabel Paging Dengan Ng-option AngularJs Part1. Nah sekarang saya akan bahas Cara Membuat Tabel Paging Nomor Dengan AngularJs Part1. Jika dilihat dari judul artikel teman-teman mungkin sudah bisa membayangkan tampilan paginationnya seperti apa. Ya betul sekali ! Karena dari judul terdapat kata nomor maka kita akan membuat table paging dengan menggunakan tombol nomor 1, 2, 3 dan seterusnya sesuai jumlah halaman.

Untuk struktur htmlnya saya menggunakan bootstrap versi 4.0 yang terbaru. Langkah pertama kita buat script angular untuk menampilkan data yang nantinya akan di cetak di dalam table. Data yang saya cetak dari json placeholder dan berikut ini scriptnya ya teman-teman.

Letakkan link angularjs didalam tag head html.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>

Dilanjutkan untuk membuat fungsi mengambil data dari json placeholder.

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

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

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

var factoryData = {};

factoryData.getData = function(){

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

};

return factoryData;

});

Langkah selanjutnya untuk Cara Membuat Tabel Paging Nomor Dengan AngularJs Part1, teman-teman bisa buat sebuah controller untuk nanti di cetak di dalam table. Dan berikut ini scriptnya.

modul.controller("myPaging", function($scope, factoryData){
        factoryData.getData().then(function(response){
            $scope.dataPost = response.data;
        });
});

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

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

$scope.dataPost = response.data;

});

Nah kemudian langsung saja teman-teman buat table bootstrap untuk mencetak data json plceholder. Tapi jangan lupa untuk mengaktifkan angularnya dengan memberikan direktif ng-app dengan parameter yang di ambil dari module angular.

<html lang="en" ng-app="myApp">

1	<html lang="en" ng-app="myApp">

Dan di tag body teman-teman berikkan ng-controller dengan parameter yang diambil dari controller angular.

<body ng-controller="myPaging">

1	<body ng-controller="myPaging">

Dan terakhit kita cetak datanya dalam table data seperti di bawah ini.

<table class="table table-striped">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Email</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="dn in dataPost" >
                <th scope="row">{{dn.id}}</th>
                <td>{{dn.name}}</td>    
                <td>{{dn.email}}</td>              
              </tr>
            </tbody>
</table>

<thead>

<tr>

<th scope="col">Email</th>

</tr>

</thead>

<tbody>

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

</tr>

</tbody>

</table>

Jika teman-teman buka di browser maka data yang tampil ada 10 baris atau semua data. Selanjutnya kita akan membuat limit dari data yang ditampilkan dan membuat pagination dengan tombol nomor.

Demikian artikel tentang Cara Membuat Tabel Paging Nomor Dengan AngularJs Part1. Kita lanjutkan pada artikel selanjutnya tentang Cara Membuat Tabel Paging Nomor Dengan AngularJs Part2.

Facebook DUMET School

Categories