Pagination, Search, Filter AJAX di PHP MySQL (Dashboard Modern Profesional)

Dalam era dashboard modern dan aplikasi web interaktif, pengguna menuntut pengalaman yang cepat dan efisien tanpa perlu memuat ulang halaman. Salah satu teknik yang paling umum digunakan untuk mencapai hal ini adalah dengan menggabungkan pagination, search, dan filter menggunakan AJAX. Dengan kombinasi ini, tampilan data menjadi lebih responsif — hasil pencarian langsung muncul, data dapat difilter secara real-time, dan navigasi antar halaman terasa mulus.

Bayangkan halaman admin dengan ribuan data pengguna atau produk. Tanpa pagination dan AJAX, setiap kali kita mencari atau memfilter data, seluruh halaman akan reload — memperlambat pengalaman pengguna. Namun, dengan teknik Pagination + Search + Filter AJAX, semua proses dapat dilakukan secara dinamis hanya dengan memuat ulang sebagian kecil data. Artikel ini akan membahas secara lengkap bagaimana membuat fitur tersebut di PHP MySQL, baik dari sisi backend maupun frontend.

Struktur Dasar Tabel dan Database

Misalnya kita memiliki tabel products untuk contoh data:

CREATE TABLE products (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  category VARCHAR(50),
  price DECIMAL(10,2),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

File `config.php` (Koneksi Database)

Gunakan koneksi MySQLi OOP agar lebih aman dan efisien:

<?php
$mysqli = new mysqli("localhost", "root", "", "db_toko");

if ($mysqli->connect_error) {
    die("Koneksi gagal: " . $mysqli->connect_error);
}
?>

File `fetch_data.php` (AJAX Handler)

File ini bertugas menampilkan data berdasarkan pagination, search, dan filter secara dinamis.

<?php
include 'config.php';

$limit = 5; // jumlah data per halaman
$page = isset($_POST['page']) ? $_POST['page'] : 1;
$search = isset($_POST['search']) ? $mysqli->real_escape_string($_POST['search']) : '';
$filter = isset($_POST['filter']) ? $mysqli->real_escape_string($_POST['filter']) : '';

$offset = ($page - 1) * $limit;

$where = "WHERE 1=1";
if ($search != '') {
    $where .= " AND name LIKE '%$search%'";
}
if ($filter != '') {
    $where .= " AND category = '$filter'";
}

$query = "SELECT * FROM products $where LIMIT $offset, $limit";
$result = $mysqli->query($query);

$totalQuery = $mysqli->query("SELECT COUNT(*) as total FROM products $where");
$total = $totalQuery->fetch_assoc()['total'];
$totalPages = ceil($total / $limit);

$output = '<table class="table table-bordered">
<thead><tr><th>ID</th><th>Nama</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['name']}</td>
            <td>{$row['category']}</td>
            <td>Rp " . number_format($row['price'], 0, ',', '.') . "</td>
        </tr>";
    }
} else {
    $output .= "<tr><td colspan='4' class='text-center'>Data tidak ditemukan</td></tr>";
}
$output .= "</tbody></table>";

$output .= '<div class="pagination">';
for ($i = 1; $i <= $totalPages; $i++) {
    $active = ($i == $page) ? 'active' : '';
    $output .= "<button class='page-link $active' data-page='$i'>$i</button>";
}
$output .= '</div>';

echo $output;
?>

File `index.php` (Tampilan Utama + AJAX)

Gunakan Bootstrap 5 agar tampilan lebih rapi dan profesional.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagination + Search + Filter AJAX di PHP MySQL</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.page-link.active { background-color: #0d6efd; color: white; }
</style>
</head>
<body class="p-4">

<div class="container">
    <h2 class="mb-4 text-center">Manajemen Produk (AJAX Search + Filter + Pagination)</h2>
    
    <div class="row mb-3">
        <div class="col-md-4">
            <input type="text" id="search" class="form-control" placeholder="Cari produk...">
        </div>
        <div class="col-md-4">
            <select id="filter" class="form-select">
                <option value="">Semua Kategori</option>
                <option value="Elektronik">Elektronik</option>
                <option value="Fashion">Fashion</option>
                <option value="Makanan">Makanan</option>
            </select>
        </div>
    </div>

    <div id="data-container"></div>
</div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
function load_data(page = 1) {
    var search = $('#search').val();
    var filter = $('#filter').val();
    $.ajax({
        url: "fetch_data.php",
        type: "POST",
        data: { page: page, search: search, filter: filter },
        success: function(data) {
            $('#data-container').html(data);
        }
    });
}

$(document).ready(function() {
    load_data();

    $('#search, #filter').on('input change', function() {
        load_data(1);
    });

    $(document).on('click', '.page-link', function() {
        var page = $(this).data('page');
        load_data(page);
    });
});
</script>
</body>
</html>

Keunggulan Sistem AJAX Ini

✅ Tidak perlu reload halaman (lebih cepat dan interaktif)
✅ Meningkatkan UX (User Experience)
✅ Mudah diintegrasikan dengan tabel besar
✅ Cocok untuk admin panel, toko online, dan laporan data

Kesimpulan

Menggabungkan pagination, search, dan filter dengan AJAX di PHP MySQL adalah langkah penting menuju dashboard admin yang profesional dan modern. Sistem ini tidak hanya membuat tampilan lebih cepat dan ringan, tetapi juga memberi pengalaman pengguna yang responsif. Dengan struktur modular seperti contoh di atas, kamu dapat dengan mudah menyesuaikannya untuk berbagai kebutuhan aplikasi — mulai dari sistem manajemen data hingga e-commerce.

Struktur Dasar Tabel dan Database

File config.php (Koneksi Database)

File fetch_data.php (AJAX Handler)

File index.php (Tampilan Utama + AJAX)

Keunggulan Sistem AJAX Ini

Kesimpulan

Related posts:

File `config.php` (Koneksi Database)

File `fetch_data.php` (AJAX Handler)

File `index.php` (Tampilan Utama + AJAX)