Langsung ke konten utama

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

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:

Semoga artikel kali ini bermanfaat!

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

CRUD PHP & MySQL dengan AJAX

CRUD PHP & MySQL dengan AJAX (Tanpa Reload Halaman) Halo semua, kembali lagi di Zhuzhu-sama blogger. pada artikel sebelumnya kita sudah mempelajari cara validasi dengan javascript di CRUD PHP, sekarang kita lanjut mempelajari CRUD PHP dengan menggunakan AJAX. selamat membaca kawan :) AJAX memungkinkan kita melakukan operasi CRUD (Create, Read, Update, Delete) tanpa harus me-reload halaman. Ini membuat pengalaman pengguna lebih cepat dan responsif. 1. Menyiapkan Database Buat database dan tabel berikut di MySQL: CREATE DATABASE db_mahasiswa; USE db_mahasiswa; CREATE TABLE mahasiswa ( id INT AUTO_INCREMENT PRIMARY KEY, nama VARCHAR(100), email VARCHAR(100), jurusan VARCHAR(50) ); 2. Menampilkan Data dengan AJAX Kita akan menggunakan JavaScript untuk mengambil data dari database dan menampilkannya tanpa reload. Kode index.php: <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> ...
Posting Komentar
Read more =>

Tutorial CRUD PHP & MySQL

Tutorial CRUD (Create, Read, Update, Delete) PHP & MySQL Halo semua. selamat datang kembali di Zhuzhu-sama blogger. Pada artikel sebelumnya kita sudah mempelajari dasar-dasar dari pemrograman PHP, sekarang kita akan melanjutkan ketahap selanjutnya yaitu belajar CRUD PHP dan mysql. selamat membaca. CRUD adalah operasi dasar dalam pengolahan data di database. Dalam tutorial ini, kita akan membuat sistem CRUD sederhana dengan PHP dan MySQL. 1. Membuat Database dan Tabel Buka phpMyAdmin dan jalankan SQL berikut: CREATE DATABASE crud_php; USE crud_php; CREATE TABLE mahasiswa ( id INT AUTO_INCREMENT PRIMARY KEY, nama VARCHAR(100), email VARCHAR(100), jurusan VARCHAR(50) ); 2. Membuat File Koneksi Database (config.php) File ini berfungsi untuk menghubungkan PHP dengan MySQL. <?php $host = "localhost"; $user = "root"; $pass = ""; $db = "crud_php"; $koneksi = new mysqli($host, $user, $pass, $db); if ($kon...
Posting Komentar
Read more =>

Validasi input di CRUD PHP & MySQL

Validasi Input di CRUD PHP & MySQL halo selamat datang kembali di Zhuzhu-sama blogger. Pada artikel sebelumnya kita sudah mempelajari tutorial crud php mysql. sekarang kita akan melanjutkan belajar validasi input CRUD PHP mysql. selamat membaca:). Validasi input sangat penting untuk memastikan data yang dimasukkan oleh pengguna tidak kosong, sesuai format yang diinginkan, dan aman dari serangan seperti SQL Injection atau XSS. 1. Menambahkan Validasi di tambah.php Pada form tambah data, kita akan melakukan validasi: Pastikan semua input tidak kosong Validasi format email Menggunakan htmlspecialchars() untuk menghindari karakter berbahaya Kode tambah.php setelah ditambahkan validasi: <?php include 'config.php'; ?> <h2>Tambah Data Mahasiswa</h2> <form method="POST"> Nama: <input type="text" name="nama" required><br> Email: <input type="email" name="e...
1 komentar
Read more =>