Integrasi DataTables untuk Pencarian dan Sorting dalam CRUD AJAX PHP & MySQL

yo selamat datang kembali di Zhuzhu-sama blogger.

Pada artikel sebelumnya, kita sudah menambahkan notifikasi dinamis menggunakan Bootstrap Toast. Sekarang, kita akan mengintegrasikan DataTables untuk mempermudah pencarian dan sorting data pada tabel CRUD kita.

1. Menambahkan DataTables ke Proyek

Kita akan menambahkan DataTables ke dalam proyek untuk memberikan fitur pencarian, sorting, dan pagination yang interaktif.

Menambahkan Link DataTables:

<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>

2. Menampilkan Data dalam Tabel DataTables

Kita akan mengubah kode tabel di file read.php untuk menggunakan DataTables.

Update read.php:

<?php

include 'config.php';

$result = $koneksi->query("SELECT * FROM mahasiswa");

echo "<table id='dataTable' 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. Mengaktifkan DataTables di JavaScript

Untuk mengaktifkan DataTables, kita perlu menambahkan beberapa baris kode JavaScript untuk menginisialisasi DataTable setelah tabel dimuat.

Kode script untuk mengaktifkan DataTables:

<script>

$(document).ready(function() {

    $('#dataTable').DataTable();

});

</script>

4. Menambahkan Pencarian dan Sorting

Dengan menambahkan DataTables, fitur pencarian, sorting, dan pagination otomatis akan bekerja tanpa memerlukan kode tambahan.

Penjelasan Fitur:

• Pencarian: Pengguna dapat mencari data berdasarkan nama, email, atau jurusan.
• Sorting: Pengguna dapat mengurutkan data berdasarkan nama, email, atau jurusan.
• Pagination: Data akan terpecah dalam beberapa halaman jika jumlah data banyak.

5. Kesimpulan

Dengan mengintegrasikan DataTables, kita bisa membuat antarmuka pengguna menjadi lebih interaktif dan memudahkan dalam mengelola data, seperti pencarian dan pengurutan data yang lebih efisien.

Jangan lupa follow saya untuk update lebih lanjut:

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

Semoga artikel kali ini bermanfaat!