Pagination AJAX untuk Data Besar dalam CRUD AJAX PHP & MySQL

yo selamat datang kembali di Zhuzhu-sama blogger.

Pada artikel sebelumnya, kita telah menambahkan DataTables untuk mempermudah pencarian, sorting, dan pagination. Sekarang, kita akan mengimplementasikan Pagination AJAX untuk menangani data besar dengan lebih efisien.

1. Menyiapkan Pagination di MySQL

Untuk menangani data besar, kita akan menggunakan LIMIT dan OFFSET di MySQL untuk mengatur jumlah data yang ditampilkan di setiap halaman.

Query Pagination:

$limit = 10;  // Jumlah data per halaman

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

$query = "SELECT * FROM mahasiswa LIMIT $limit OFFSET $offset";

2. Mengubah Query di read.php untuk Pagination

Kita akan memperbarui file read.php untuk menampilkan data sesuai halaman yang diminta.

Update read.php:

<?php

include 'config.php';

$page = isset($_POST['page']) ? $_POST['page'] : 1;  // Halaman yang diminta

$limit = 10;  // Jumlah data per halaman

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

$result = $koneksi->query("SELECT * FROM mahasiswa LIMIT $limit OFFSET $offset");

echo "<table class='table table-bordered'><tr><th>Nama</th><th>Email</th><th>Jurusan</th><th>Aksi</th></tr>";

while ($row = $result->fetch_assoc()) {

    echo "<tr>

            <td>".$row['nama']."</td>

            <td>".$row['email']."</td>

            <td>".$row['jurusan']."</td>

            <td>

                <button class='btn btn-warning' onclick=\"editData(".$row['id'].")\" data-bs-toggle='modal' data-bs-target='#modalEdit'>Edit</button>

                <button class='btn btn-danger' onclick=\"hapusData(".$row['id'].")\">Hapus</button>

            </td>

         </tr>";

}

echo "</table>";

?>

3. Mengambil Total Halaman

Kita juga perlu mengambil total jumlah data untuk menghitung berapa banyak halaman yang diperlukan.

Kode untuk mengambil total halaman:

<?php

$totalData = $koneksi->query("SELECT COUNT(*) FROM mahasiswa")->fetch_row()[0];

$totalPages = ceil($totalData / $limit);

?>

4. Menambahkan Navigasi Halaman

Selanjutnya, kita akan menambahkan tombol navigasi untuk berpindah antar halaman.

Update read.php untuk menambahkan tombol navigasi:

<?php

for ($i = 1; $i <= $totalPages; $i++) {

    echo "<button class='btn btn-primary' onclick='pindahHalaman($i)'>$i</button>";

}

?>

5. Mengupdate Data dengan AJAX

Setelah navigasi halaman diimplementasikan, kita akan menggunakan AJAX untuk memuat data tanpa me-refresh halaman.

Update script AJAX:

<script>

function tampilkanData(page) {

    $.ajax({

        url: "read.php",

        type: "POST",

        data: {page: page},

        success: function(response) {

            $("#dataTable").html(response);

        }

    });

}

function pindahHalaman(page) {

    tampilkanData(page);

}

</script>

6. Kesimpulan

Dengan menggunakan Pagination AJAX, kita dapat menangani data besar dengan lebih efisien tanpa perlu memuat ulang seluruh halaman.

Jangan lupa follow saya untuk update lebih lanjut:

• Instagram: @zhu.code
• GitHub: @zhubailee

Semoga artikel ini dapat bermanfaat!