Cara Membuat Pagination Menggunakan Ajax Tanpa Loading pada PHP

Cara Membuat Pagination Menggunakan Ajax Tanpa Loading pada PHP – Hai sobat ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan membahas tentang cara membuat pagination lagi namun kali ini saya akan menggunakan Ajax sehingga aplikasi tidak perlu loading. Cara ini hasilnya agak mirip dengan sobat menggunakan Datatables. Namun jika menggunakan Datatables dan dengan cara yang standar maka itu tidak efektif karena sebenarnya aplikasi mengambil semua data terlebih dahulu baru oleh javascriptnya dibuat pagenya. Jadi jika ada 100rb data ya halaman akan terus loading hingga mendapatkan ke 100rb data tersebut dan dijadikan “SEOLAH-OLAH” pagination jadi user mengira saat berganti page sangat ringan namun jika memuat halamannya lambat tentu tidak efektif. Berbeda dengan cara menggunakan Ajax ini karena datanya kita limit atau tidak kita tampilkan ke 100rbnya namun hanya 10 atau berapa per pagenya jadi loading keseluruhan halaman jadi ringan dan jika ganti page juga cepat dan tentunya tidak perlu loading lagi.

Pagination saya buat ada tombol First/Halaman Pertama dan Last/Halaman Terakhir. Dan kita akan membuat pagination menggunakan bootstrap untuk mempercantik tampilannya seperti yang sudah saya bahas pada tutorial sebelumnya

Simple Pagination Pada Bootstrap 4

Jika sobat mencari artikel untuk membuat pagination dengan cara standar yaitu menggunakan url pada PHP maka sobat bisa kunjungi cara dibawah

Cara Membuat Pagination dengan Database MySQL pada PHP

Membuat Database MySQL

1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.

 

2. Buat tabel untuk demonya dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go

CREATE TABLE `tbl_mahasiswa`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama_mahasiswa` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `alamat` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `jenis_kelamin` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `tgl_masuk` date NOT NULL,
  `jurusan` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `biodata` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `avatar` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 67 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Compact;

 

3. Kemudian daripada sobat memasukkan datanya satu-persatu maka sobat bisa jalankan perintah query dibawah

INSERT INTO `tbl_mahasiswa` VALUES (1, 'Dewan Komputer', 'Cilacap', 'Laki-laki', '2019-01-01', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (2, 'Sule', 'Jakarta', 'Laki-laki', '2019-01-01', 'Teknik Informatika', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (3, 'Maemunah', 'Yogyakarta', 'Perempuan', '2019-01-01', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (4, 'Siti', 'Semarang', 'Perempuan', '2019-01-01', 'Teknik Informatika', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (5, 'Andre', 'Purwokerto', 'Laki-laki', '2019-01-22', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (6, 'Nunung', 'Cilacap', 'Perempuan', '2019-03-20', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (7, 'Aziz', 'Cilacap', 'Laki-laki', '2019-03-14', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (8, 'Lucinta Luma', 'Jakarta', 'Laki-laki', '2019-03-19', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (9, 'Luna Maya', 'Yogyakarta', 'Perempuan', '2019-03-19', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (10, 'Syahrini', 'Semarang', 'Perempuan', '2019-03-22', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (11, 'Tegar', 'Purwokerto', 'Laki-laki', '2019-03-07', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (12, 'Tukul', 'Cilacap', 'Laki-laki', '2019-03-05', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (13, 'Nanang', 'Jakarta', 'Laki-laki', '2019-03-19', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (14, 'Bambang', 'Yogyakarta', 'Laki-laki', '2019-03-19', 'Teknik Informatika', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (15, 'Arwana', 'Semarang', 'Laki-laki', '2019-03-12', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (16, 'Alan', 'Yogyakarta', 'Laki-laki', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (17, 'John', 'Semarang', 'Laki-laki', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (18, 'Gundul', 'Purwokerto', 'Laki-laki', '2019-03-12', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (19, 'Nella Kharisma', 'Cilacap', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (20, 'Via Vallen', 'Jakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (21, 'Baim', 'Yogyakarta', 'Laki-laki', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (22, 'Lulu', 'Yogyakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (44, 'Dery', 'Cilacap', 'Laki-laki', '2019-01-01', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (45, 'Rafii Ahmad', 'Jakarta', 'Laki-laki', '2019-01-01', 'Teknik Informatika', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (46, 'Ariel Noah', 'Yogyakarta', 'Laki-laki', '2019-01-01', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (47, 'Ariel Tatum', 'Semarang', 'Perempuan', '2019-01-01', 'Teknik Informatika', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (48, 'Gisella', 'Purwokerto', 'Perempuan', '2019-01-22', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (49, 'Vanessa Angel', 'Cilacap', 'Perempuan', '2019-03-20', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (50, 'Nikita Mirzani', 'Cilacap', 'Perempuan', '2019-03-14', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (51, 'Ayu Dewi', 'Jakarta', 'Perempuan', '2019-03-19', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (52, 'Gading Martin', 'Yogyakarta', 'Laki-laki', '2019-03-19', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (53, 'Maya', 'Semarang', 'Perempuan', '2019-03-22', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (54, 'Agnes', 'Purwokerto', 'Perempuan', '2019-03-07', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (55, 'Amel Alvi', 'Cilacap', 'Perempuan', '2019-03-05', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (56, 'Dian Satro', 'Jakarta', 'Perempuan', '2019-03-19', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (57, 'Cinta', 'Yogyakarta', 'Perempuan', '2019-03-19', 'Teknik Informatika', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (58, 'Rangga', 'Semarang', 'Laki-laki', '2019-03-12', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (59, 'Melinda', 'Yogyakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (60, 'Meriam Belina', 'Semarang', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (61, 'Cinta Laura', 'Purwokerto', 'Perempuan', '2019-03-12', 'Sistem Informasi', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (62, 'Bunga', 'Cilacap', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (63, 'Citra', 'Jakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (64, 'Lestari', 'Yogyakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (65, 'Titi Kamal', 'Yogyakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png');
INSERT INTO `tbl_mahasiswa` VALUES (66, 'Dedy Corbuzier', 'Jakarta', 'Laki-laki', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png');

 

Cara Membuat Pagination dengan Ajax

Berikut adalah cara membuat simple pagination :

1. Pertama tentunya seperti tutorial saya sebelumnya yaitu saya memisahkan koneksi agar penulisannya hanya sekali dan bisa digunakan berkali-kali dan tentunya mempermudah untuk migrasi server. Pertama yaitu buat file koneksi.php dan isikan kode dibawah untuk mengkoneksikan dengan database

<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'db_dewankomputer');

// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
?>

 

2. Buat file index.php. Karena kita membuat pagination dengan tampilan yang telah disediakan oleh bootstrap jadi kita perlu librarti css bootstap dan karena menggunakan Ajax maka kita perlu jquery. Tambahkan kode dibawah pada tag <head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

 

3. Kemudian file index.php, isikan kode dibawah pada tag <body>

<nav class="navbar navbar-dark bg-danger">
  <a class="navbar-brand text-white" href="index.php">
    Dewan Komputer
  </a>
</nav>
<div class="container">
  <h3 align="center" class="mt-3">Dewan Demo Pagination Dengan Ajax</h3>

  <div class="table-responsive" id="data"></div>  
</div>
<script>
 $(document).ready(function(){
      load_data();
      function load_data(page){
           $.ajax({
                url:"data.php",
                method:"POST",
                data:{page:page},
                success:function(data){
                     $('#data').html(data);
                }
           })
      }
      $(document).on('click', '.halaman', function(){
           var page = $(this).attr("id");
           load_data(page);
      });
 });
 </script>

Penjelasan :

Kode dibawah berfungsi untuk menampilkan tabelnya menggunakan Ajax

<div class="table-responsive" id="data"></div>

Sedangkan fungsi load_data() adalah untuk mengambil datanya yang ada pada file data.php oleh karena itu kita perlu membuat file data.php yang isinya adalah tabel dan paginationnya.

 

4. Kemudian https://dewankomputer.com/2019/03/06/cara-membuat-pagination-menggunakan-ajax-tanpa-loading-pada-php/buat file data.php dan isikan dengan script dibawah

<?php include 'koneksi.php'; ?>

        <table class="table table-striped table-bordered">
          <thead>
            <tr>
              <th>No</th>
              <th>Nama mahasiswa</th>
              <th>Alamat</th>
              <th>Jenis Kelamin</th>
              <th>Jurusan</th>
              <th>Foto</th>
            </tr>  
          </thead>
          <tbody>
            <?php
              $page = (isset($_POST['page']))? $_POST['page'] : 1;
              $limit = 5; 
              $limit_start = ($page - 1) * $limit;
              $no = $limit_start + 1;

              $query = "SELECT * FROM tbl_mahasiswa ORDER BY nama_mahasiswa ASC LIMIT $limit_start, $limit";
              $dewan1 = $db1->prepare($query);
              $dewan1->execute();
              $res1 = $dewan1->get_result();
              while ($row = $res1->fetch_assoc()) {
            ?>
              <tr>
                <td><?php echo $no++; ?></td>
                <td><?php echo $row["nama_mahasiswa"]; ?></td>
                <td><?php echo $row["alamat"]; ?></td>
                <td><?php echo $row["jenis_kelamin"]; ?></td>
                <td><?php echo $row["jurusan"]; ?></td>
                <td><img src='<?php echo $row["avatar"]; ?>' height="30px"></td>
              </tr>
            <?php } ?>
          </tbody>
        </table>

        <?php
          $query_jumlah = "SELECT count(*) AS jumlah FROM tbl_mahasiswa";
          $dewan1 = $db1->prepare($query_jumlah);
          $dewan1->execute();
          $res1 = $dewan1->get_result();
          $row = $res1->fetch_assoc();
          $total_records = $row['jumlah'];
        ?>
        <p>Total baris : <?php echo $total_records; ?></p>
        <nav class="mb-5">
          <ul class="pagination justify-content-end">
            <?php
              $jumlah_page = ceil($total_records / $limit);
              $jumlah_number = 1; //jumlah halaman ke kanan dan kiri dari halaman yang aktif
              $start_number = ($page > $jumlah_number)? $page - $jumlah_number : 1;
              $end_number = ($page < ($jumlah_page - $jumlah_number))? $page + $jumlah_number : $jumlah_page;
        
              

              if($page == 1){
                echo '<li class="page-item disabled"><a class="page-link" href="#">First</a></li>';
                echo '<li class="page-item disabled"><a class="page-link" href="#"><span aria-hidden="true">&laquo;</span></a></li>';
              } else {
                $link_prev = ($page > 1)? $page - 1 : 1;
                echo '<li class="page-item halaman" id="1"><a class="page-link" href="#">First</a></li>';
                echo '<li class="page-item halaman" id="'.$link_prev.'"><a class="page-link" href="#"><span aria-hidden="true">&laquo;</span></a></li>';
              }

              for($i = $start_number; $i <= $end_number; $i++){
                $link_active = ($page == $i)? ' active' : '';
                echo '<li class="page-item halaman '.$link_active.'" id="'.$i.'"><a class="page-link" href="#">'.$i.'</a></li>';
              }

              if($page == $jumlah_page){
                echo '<li class="page-item disabled"><a class="page-link" href="#"><span aria-hidden="true">&raquo;</span></a></li>';
                echo '<li class="page-item disabled"><a class="page-link" href="#">Last</a></li>';
              } else {
                $link_next = ($page < $jumlah_page)? $page + 1 : $jumlah_page;
                echo '<li class="page-item halaman" id="'.$link_next.'"><a class="page-link" href="#"><span aria-hidden="true">&raquo;</span></a></li>';
                echo '<li class="page-item halaman" id="'.$jumlah_page.'"><a class="page-link" href="#">Last</a></li>';
              }
            ?>
          </ul>
        </nav>

Penjelasan :

Kode diatas sama seperti pada tutorial sebelumnya yang membahas tentang pagination. Kita hanya ‘cut’ kodenya saja dari tabel sampai paginationnya. Namun ada yang kita ganti yaitu pada <a href=””> pada contoh kali ini kita hanya tuliskan <a href=”#”> dan pada <li> kita tambahkan class .halaman dan juga kita tambahkan id=’$page’.

 

5. Jika sobat jalankan maka akan menghasilkan tampilan seperti berikut

Jika sobat kli halamannya maka tidak ada loadingnya atau tanpa refresh page. Tidak percaya? sobat bisa lihat pada demonya. Sekian postingan saya tentangCara Membuat Pagination Menggunakan Ajax Tanpa Loading pada PHP. Jika ada kesalahan saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan komentar pada kolom komentar dibawah. Kunjungi postingan saya lainnya untuk menambah ilmu dan wawasan sobat.

 Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :
Demo