Pagination dan Pencarian AJAX di PHP MySQL (Real-Time Search Tanpa Reload Halaman)

Dalam aplikasi modern seperti toko online, dashboard admin, dan sistem katalog produk, pengguna ingin mencari data secara cepat tanpa harus menunggu halaman dimuat ulang. Dengan Pagination dan Pencarian AJAX di PHP MySQL, kita bisa menampilkan hasil pencarian dan navigasi antar halaman secara real-time — tanpa reload halaman.

Teknik ini membuat aplikasi terasa lebih cepat, interaktif, dan profesional. Hanya bagian tabel data yang berubah, sementara struktur halaman utama tetap.
Kombinasi ini umum digunakan dalam sistem e-commerce, CRM, dan manajemen data agar pengalaman pengguna (UX) lebih baik.

Konsep Dasar

Pagination dan pencarian berbasis AJAX bekerja dengan tiga komponen utama:

Halaman utama (index.php) – menampilkan form pencarian dan area data.
File pemroses (data.php) – memproses query database berdasarkan keyword & halaman.
AJAX (jQuery) – mengirim permintaan dan menampilkan hasil tanpa reload.

Struktur Folder

project/
│
├─ koneksi.php
├─ index.php
├─ data.php
└─ 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 dan Pencarian 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">Pagination + Search AJAX</h3>

  <!-- Form Pencarian -->
  <div class="row mb-3">
    <div class="col-md-6 offset-md-3">
      <input type="text" id="keyword" class="form-control" placeholder="Cari produk...">
    </div>
  </div>

  <!-- Area Tabel -->
  <div id="tabel-data"></div>
</div>

<script>
$(document).ready(function() {
  loadData(1, ''); // load awal

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

  // Ketika mengetik keyword
  $('#keyword').on('keyup', function() {
    const keyword = $(this).val();
    loadData(1, keyword); // reset ke halaman 1
  });

  // Navigasi pagination
  $(document).on('click', '.pagination a', function(e) {
    e.preventDefault();
    const halaman = $(this).data('page');
    const keyword = $('#keyword').val();
    loadData(halaman, keyword);
  });
});
</script>

</body>
</html>

File: `data.php`

<?php
include 'koneksi.php';

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

// Hitung total data
$where = $keyword ? "WHERE nama_produk LIKE '%$keyword%' OR kategori LIKE '%$keyword%'" : "";
$total_query = $koneksi->query("SELECT COUNT(*) AS total FROM produk $where");
$total_data = $total_query->fetch_assoc()['total'];
$total_halaman = ceil($total_data / $limit);

// Ambil data sesuai halaman dan keyword
$result = $koneksi->query("SELECT * FROM produk $where 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>Kategori</th>
    <th>Harga</th>
  </tr>
</thead>
<tbody>';

if ($result->num_rows > 0) {
  while ($row = $result->fetch_assoc()) {
    $output .= "<tr>
      <td>{$row['id']}</td>
      <td>{$row['nama_produk']}</td>
      <td>{$row['kategori']}</td>
      <td>Rp" . number_format($row['harga']) . "</td>
    </tr>";
  }
} else {
  $output .= "<tr><td colspan='4' class='text-center'>Data tidak ditemukan</td></tr>";
}

$output .= "</tbody></table>";

// Pagination link
$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

Form input (#keyword): digunakan untuk pencarian secara real-time.
AJAX ($.ajax): mengirim parameter halaman dan keyword ke data.php.
Query dinamis di data.php: menyesuaikan hasil pencarian sesuai kata kunci dan nomor halaman.
Pagination tetap aktif meski pencarian sedang berlangsung.

Keamanan dan Optimasi

✅ Gunakan Prepared Statement ($stmt = $koneksi->prepare(...)) untuk mencegah SQL Injection.
✅ Tambahkan debounce di JavaScript agar tidak mengirim request terlalu cepat saat user mengetik.
✅ Untuk data besar, gunakan server-side pagination + JSON API (seperti DataTables).

Contoh Query Aman (Prepared Statement)

$stmt = $koneksi->prepare("SELECT * FROM produk WHERE nama_produk LIKE ? OR kategori LIKE ? LIMIT ? OFFSET ?");
$search = "%{$keyword}%";
$stmt->bind_param("ssii", $search, $search, $limit, $offset);
$stmt->execute();
$result = $stmt->get_result();

Hasil Akhir

✅ Hasil pencarian langsung muncul saat mengetik.
✅ Navigasi antar halaman tetap bisa digunakan tanpa reload.
✅ Tabel tampil dinamis, cepat, dan responsif dengan Bootstrap 5.

Kesimpulan

Dengan menerapkan Pagination dan Pencarian AJAX di PHP MySQL, kamu bisa menciptakan pengalaman pencarian data yang cepat, modern, dan efisien layaknya toko online besar. Fitur ini membuat tampilan aplikasi terasa profesional, meningkatkan UX, dan mengurangi beban server karena hanya data relevan yang ditampilkan.