Cara Membuat Tabel Paging Nomor Dengan AngularJs Part2

Pada artikel sebelumnya tentang Cara Membuat Tabel Paging Nomor Dengan AngularJs Part1 kita sudah menampilkan data dengan template yang kita buat dengan bootstrap versi 4.0. Dan sekarang pada artikel tentang Cara Membuat Tabel Paging Nomor Dengan AngularJs Part2, saya akan memberikan limit terlebih dahulu untuk data yang tampil perhalamannya. Dan teman-teman siapkan dulu beberapa variable di dalam controller seperti berikut ini.

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

Jika sudah lalu tambahkan direktif ng-if didalam tr tbody seperti berikut ini.

ng-if="$index >= (currentpage*pagesize) && $index < ((currentpage+1)*pagesize)"

Lalu jika sudah memberikan limit dari data yang tampil. Kita lanjutkan membuat sebuah fungsi di dalam controller untuk tombol prev, next dan nomor seperti pada script di bawah ini.

//pagination tombol prev dan next
$scope.paging = function(type){
              if(type == 0 && $scope.currentpage > 0){
                --$scope.currentpage;
              }else if(type == 1 && $scope.currentpage < $scope.pagenumber-1){
                ++$scope.currentpage;
              }
}
//looping tombol nomor halaman
$scope.getNumber = function(n){
              return new Array(n);
 }
//pagination tombol nomor
$scope.getPage = function(x){
              $scope.currentpage = x;
 }

Dan langkah terakhir Cara Membuat Tabel Paging Nomor Dengan AngularJs Part2 kita buat tombol pagination prev next dan nomor dengan menggunakan bootstrap 4.0. Berikut ini scriptnya dan teman-teman bisa salin.

<nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
              <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous" ng-click="paging(0)">
                  <span aria-hidden="true">&laquo;</span>
                  <span class="sr-only">Previous</span>
                </a>
              </li>
              <li class="page-item" ng-repeat="i in getNumber(pagenumber) track by $index" ng-class="currentpage == $index ? 'active' : ''">
                <a class="page-link" href="#" ng-click="getPage($index)">{{$index+1}}</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#" aria-label="Next" ng-click="paging(1)">
                  <span aria-hidden="true">&raquo;</span>
                  <span class="sr-only">Next</span>
                </a>
              </li>
            </ul>
</nav>
<div class="text-center">
     <small>Halaman {{currentpage + 1}} dari {{pagenumber}} halaman</small>
</div>

Untuk tombol prev dan next sudah saya jelaskan di artikel tentang Cara Membuat Tabel Paging Sederhana Dengan AngularJs. Jadi untuk kesempatan kali ini saya hanya akan membahas tombol nomor saja. Jika teman-teman perhatikan saya berikan ng-repeat=”i in getNumber(pagenumber) track by $index” di dalam li untuk melooping tombol nomornya dengan membuat sebuah fungsi getNumber() didalam controller. Dan kemudian saya berikan ng-class=”currentpage == $index ? ‘active’ : ”” dimana ada kondisi untuk mengaktifkan class ‘active’ ketika halaman stanby. Dan terakhir untuk menjalankan pagination nomornya saya berikan direktif ng-click=”getPage($index)”>{{$index+1}} pada tag a di html menggunakan fungsi getPage() yang sudah dibuat di dalam controller.

Oke jika teman-teman masih bingung saya tampilkan script keseluruhan seperti pada gambar di bawah ini.

  

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