Pagination AJAX di PHP MySQL (Tanpa Reload Halaman)

Pagination adalah fitur penting untuk membagi data ke beberapa halaman agar lebih ringan dan mudah dibaca. Namun, pada sistem konvensional, setiap kali pengguna berpindah halaman, browser harus reload seluruh halaman. Dengan pagination AJAX di PHP MySQL, kita bisa membuat pengalaman pengguna lebih cepat dan interaktif. Hanya bagian tabel data yang berubah — tanpa me-refresh seluruh halaman.

Teknik ini umum digunakan di dashboard admin, aplikasi toko online, hingga portal berita modern.

Konsep Dasar Pagination AJAX

Pagination berbasis AJAX bekerja dengan prinsip berikut:

Halaman utama hanya memuat struktur HTML dan area tampilan data.
JavaScript (jQuery) mengirim permintaan ($.ajax) ke file PHP yang mengambil data sesuai halaman.
PHP mengembalikan HTML tabel yang di-render langsung ke halaman tanpa reload.

Struktur Folder

project/
│
├─ koneksi.php
├─ index.php        ← Halaman utama
├─ data.php         ← Script pemrosesan pagination
└─ css/
   └─ bootstrap.min.css

File: `koneksi.php`

<?php
$koneksi = new mysqli("localhost", "root", "", "db_toko");
if ($koneksi->connect_error) {
    die("Koneksi gagal: " . $koneksi->connect_error);
}
?>

File: `index.php`

<?php include 'koneksi.php'; ?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Pagination AJAX di PHP MySQL</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body class="p-4 bg-light">

<div class="container">
  <h3 class="mb-3 text-center">Daftar Produk (AJAX Pagination)</h3>
  <div id="tabel-data"></div> <!-- Data akan dimuat lewat AJAX -->
</div>

<script>
$(document).ready(function() {
  // Fungsi untuk memuat data pertama kali
  loadData(1);

  // Fungsi utama untuk ambil data dari data.php
  function loadData(halaman) {
    $.ajax({
      url: "data.php",
      type: "GET",
      data: { halaman: halaman },
      success: function(response) {
        $('#tabel-data').html(response);
      }
    });
  }

  // Event klik untuk pagination link
  $(document).on('click', '.pagination a', function(e) {
    e.preventDefault();
    const halaman = $(this).data('page');
    loadData(halaman);
  });
});
</script>
</body>
</html>

File: `data.php`

<?php
include 'koneksi.php';

$limit = 5;
$halaman = isset($_GET['halaman']) ? (int)$_GET['halaman'] : 1;
$offset = ($halaman - 1) * $limit;

// Hitung total data
$total_query = $koneksi->query("SELECT COUNT(*) AS total FROM produk");
$total_data = $total_query->fetch_assoc()['total'];
$total_halaman = ceil($total_data / $limit);

// Ambil data
$result = $koneksi->query("SELECT * FROM produk ORDER BY id DESC LIMIT $limit OFFSET $offset");

$output = '<table class="table table-bordered table-striped">
<thead class="table-dark">
  <tr>
    <th>ID</th>
    <th>Nama Produk</th>
    <th>Harga</th>
    <th>Stok</th>
  </tr>
</thead>
<tbody>';
while ($row = $result->fetch_assoc()) {
  $output .= "<tr>
    <td>{$row['id']}</td>
    <td>{$row['nama_produk']}</td>
    <td>Rp" . number_format($row['harga']) . "</td>
    <td>{$row['stok']}</td>
  </tr>";
}
$output .= "</tbody></table>";

// Navigasi pagination
$output .= '<nav><ul class="pagination justify-content-center">';
for ($i = 1; $i <= $total_halaman; $i++) {
  $active = ($i == $halaman) ? 'active' : '';
  $output .= "<li class='page-item $active'>
                <a href='#' class='page-link' data-page='$i'>$i</a>
              </li>";
}
$output .= '</ul></nav>';

echo $output;
?>

Penjelasan Script

index.php memuat HTML dasar dan area <div id="tabel-data"> untuk menampung hasil AJAX.
data.php hanya menampilkan tabel dan navigasi pagination sesuai halaman yang diminta.
AJAX (jQuery) mengambil data dari data.php dan mengganti isi div tanpa reload.
Class .pagination a digunakan untuk memicu AJAX ketika diklik.

Hasilnya

✅ Saat halaman pertama kali dibuka, data produk otomatis dimuat.
✅ Ketika pengguna klik halaman berikutnya, hanya tabel yang diperbarui — tanpa reload.
✅ Pagination tampil rapi dan responsif dengan Bootstrap 5.

Tips Tambahan

Tambahkan efek loading seperti spinner (.spinner-border) agar UX lebih halus.
Gunakan prepared statement untuk keamanan query.
Jika data besar, gunakan AJAX + JSON API agar lebih cepat.

Kesimpulan

Dengan menerapkan pagination AJAX di PHP MySQL, aplikasi web menjadi lebih modern, cepat, dan responsif. Tidak perlu reload halaman setiap kali pindah data, cukup mengganti bagian yang relevan dengan AJAX.

Pagination model ini sangat cocok untuk dashboard, katalog produk, sistem laporan, dan aplikasi berbasis data besar.

Konsep Dasar Pagination AJAX

Struktur Folder

File: koneksi.php

File: index.php

File: data.php