Pengenalan DataTables

Saat data produk di database kita sudah ratusan, nampilin semuanya dalam satu halaman web pasti bikin halamannya memanjang dan berat.

Untuk mengatasinya, kita bisa menggunakan DataTables. DataTables adalah plugin dari jQuery yang otomatis menyulap tabel HTML biasa menjadi tabel interaktif yang memiliki fitur:

  • Search: Mencari data secara real-time.
  • Pagination: Membagi data ke dalam beberapa halaman (misal: 10 data per halaman).
  • Sorting: Mengurutkan data berdasarkan abjad atau angka saat judul kolom diklik.

Langkah 15 - Menerapkan DataTables di index.php

Karena sebelumnya kita menggunakan Bootstrap 5, kita akan memanggil file DataTables yang khusus didesain untuk Bootstrap 5 agar tampilannya tetap serasi.

Silahkan buka file index.php, lalu ubah seluruh kodenya menjadi seperti ini:

<?php
session_start();

// Proteksi halaman
if (!isset($_SESSION['status']) || $_SESSION['status'] != "login") {
    header("Location: login.php");
    exit();
}

include "koneksi.php";
$query = mysqli_query($conn, "SELECT * FROM produk");
?>

<!DOCTYPE html>
<html>
<head>
    <title>Data Produk</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">
</head>

<body class="bg-light">

<div class="container mt-5 mb-5">
    
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>Data Produk</h2>
        <div>
            <a href="tambah.php" class="btn btn-primary">Tambah Data</a>
            <a href="logout.php" class="btn btn-danger" onclick="return confirm('Yakin ingin keluar?')">Logout</a>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">
            
            <table id="tabel-produk" class="table table-bordered table-striped">
                <thead class="table-dark">
                    <tr>
                        <th>No</th>
                        <th>Nama</th>
                        <th>Harga</th>
                        <th>Deskripsi</th>
                        <th>Gambar</th>
                        <th>Aksi</th>
                    </tr>
                </thead>

                <tbody>
                    <?php 
                    $no = 1; // Variabel penomoran otomatis
                    while($data = mysqli_fetch_assoc($query)) { 
                    ?>
                    <tr>
                        <td><?= $no++ ?></td>
                        <td><?= $data['nama'] ?></td>
                        <td>Rp <?= number_format($data['harga']) ?></td>
                        <td><?= $data['deskripsi'] ?></td>
                        <td>
                            <img src="img/<?= $data['gambar'] ?>" width="80" class="rounded">
                        </td>
                        <td>
                            <a href="detail.php?id=<?= $data['id'] ?>" class="btn btn-info btn-sm">Detail</a>
                            <a href="edit.php?id=<?= $data['id'] ?>" class="btn btn-warning btn-sm">Edit</a>
                            <a href="hapus.php?id=<?= $data['id'] ?>" onclick="return confirm('Yakin ingin hapus?')" class="btn btn-danger btn-sm">Hapus</a>
                        </td>
                    </tr>
                    <?php } ?>
                </tbody>
            </table>

        </div>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

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

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

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

    <script>
        $(document).ready(function() {
            $('#tabel-produk').DataTable();
        });
    </script>

</body>
</html>

Penjelasan Kode DataTables:

1. Menambahkan CSS DataTables

<link href="[https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css](https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css)" rel="stylesheet">

Diletakkan di dalam tag <head> di bawah link CSS Bootstrap. Ini berfungsi agar tombol Search, kotak Pagination, dan ikon panah Sorting bawaan DataTables tampilannya menyatu dengan gaya Bootstrap.

2. Menambahkan Atribut ID pada Tabel

<table id="tabel-produk" class="table table-bordered table-striped">

DataTables butuh "target" tabel mana yang mau diubah. Oleh karena itu, kita wajib memberikan id pada tag <table>. Bebas namanya apa saja, di sini kita gunakan id="tabel-produk". Selain itu, DataTables juga mewajibkan struktur tabel memiliki <thead> dan <tbody> yang jelas.

3. Menambahkan File JavaScript (Bawah HTML)

<script src="[https://code.jquery.com/jquery-3.7.0.min.js](https://code.jquery.com/jquery-3.7.0.min.js)"></script>
<script src="[https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js](https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js)"></script>

Script diletakkan paling bawah (sebelum penutup </body>) agar halaman web memuat (loading) tampilan HTML-nya terlebih dahulu sebelum memuat script yang berat. Karena DataTables dibuat menggunakan jQuery, file jQuery wajib dipanggil pertama kali sebelum file DataTables-nya.

4. Script Inisialisasi (Menyalakan DataTables)

<script>
    $(document).ready(function() {
        $('#tabel-produk').DataTable();
    });
</script>

Ini adalah "tombol on"-nya. Script ini memerintahkan browser: "Hai jQuery, kalau struktur HTML halamannya sudah siap semua (document ready), tolong cari elemen HTML yang punya ID tabel-produk, lalu ubah dia menjadi DataTable".Silahkan menulis di sini