#Laravel #DataTables #PHP #Tutorial #Pemula

✦ Artikel 45 dari 50 — Seri Belajar Laravel Lengkap

DataTables Client-Side:
Tabel Interaktif dari Data JSON Lokal

Buat tabel web yang bisa search, sort, dan paginate otomatis — tanpa request ke server setiap klik. Dengan datatables client side laravel, ini lebih mudah dari yang kamu bayangkan.

⏱️

10 Menit Baca

Estimasi waktu

🎯

Level Pemula

Cocok untuk kamu

📅

2025

Diperbarui

Pernah bikin tabel HTML biasa, terus bos kamu bilang: "Bisa nggak dikasih fitur search sama sort?" — dan kamu langsung keringat dingin? Tenang, kamu nggak sendirian. Banyak developer Laravel pemula yang langsung nyerah saat dengar kata "tabel interaktif". Padahal, dengan datatables client side laravel, semuanya bisa selesai dalam hitungan menit — bahkan tanpa nulis satu baris JavaScript yang ribet!

Di artikel ke-45 dari Seri Belajar Laravel Lengkap ini, kita akan belajar cara membuat tabel interaktif menggunakan pendekatan client-side DataTables, di mana data JSON sudah dimuat di halaman dan semua fitur (search, sort, paginate) berjalan di browser — tanpa bolak-balik ke server. Efisien, cepat, dan bikin kagum!

📌 Definisi Penting

Apa itu DataTables Client-Side?

DataTables Client-Side adalah mode kerja plugin jQuery DataTables di mana seluruh data dimuat sekaligus ke browser pada saat halaman pertama kali dibuka. Semua proses pencarian, pengurutan, dan paginasi terjadi di sisi client (browser) — bukan dikirim ke server. Cocok digunakan saat jumlah data tidak terlalu besar (sekitar di bawah 5.000–10.000 baris).

🆚 Client-Side vs Server-Side DataTables di Laravel: Pilih yang Mana?

Sebelum terjun langsung ke kode, penting banget kamu ngerti dulu bedanya dua mode ini. Bayangkan kamu punya toko buku. Client-side itu seperti kamu bawa semua buku ke rumah pembeli, lalu pembeli sendiri yang nyari. Server-side itu seperti pembeli minta buku tertentu dan kamu yang nyari di gudang lalu kirim ke sana.

Aspek	⚡ Client-Side	🖥️ Server-Side
Cara Kerja	Data dimuat semua sekaligus	Data diminta per halaman/filter
Kecepatan Respons	Sangat cepat setelah load awal	Request baru setiap interaksi
Kapasitas Data	✅ < 10.000 baris	✅ Jutaan baris
Beban Server	✅ Ringan	⚠️ Lebih berat
Kompleksitas Setup	✅ Mudah & cepat	⚠️ Perlu konfigurasi lebih

🔥

Fakta Menarik

Plugin jQuery DataTables sudah diunduh lebih dari 12 juta kali dan digunakan oleh ratusan ribu website di seluruh dunia. Ini bukan sekadar library biasa — ini sudah jadi standar industri untuk tabel web interaktif!

🛠️ Cara Setup DataTables Client-Side Laravel Langkah demi Langkah

Oke, mari kita mulai ngoding! Di sini kita asumsikan kamu sudah punya project Laravel yang berjalan (kalau belum, cek artikel-artikel sebelumnya dalam seri ini ya). Kita akan membuat tabel daftar produk yang bisa di-search, sort, dan paginate — langsung dari data JSON lokal.

Include CDN DataTables di Layout Blade

Tambahkan CDN jQuery, Bootstrap, dan DataTables ke file layout utamamu. Kalau kamu pakai layout yang sudah ada Bootstrap-nya, tinggal tambahkan bagian DataTables-nya saja.

resources/views/layouts/app.blade.php

<!-- Di dalam <head> -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css">

<!-- Di akhir <body>, setelah jQuery dan Bootstrap JS -->
<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.bootstrap4.min.js"></script>

💡

Tips

Pastikan urutan pemuatan script-nya benar: jQuery dulu → Bootstrap JS → DataTables JS. Kalau urutannya salah, DataTables tidak akan berfungsi dan browser akan melempar error di console.

Buat Route dan Controller

Buat route sederhana yang mengarah ke controller, lalu di controller kita kirim data produk ke view sebagai variabel PHP yang bisa kita konversi ke JSON.

routes/web.php

use App\Http\Controllers\ProdukController;

Route::get('/produk', [ProdukController::class, 'index'])->name('produk.index');

app/Http/Controllers/ProdukController.php

<?php

namespace App\Http\Controllers;

use App\Models\Produk;
use Illuminate\Http\Request;

class ProdukController extends Controller
{
    public function index()
    {
        $produk = Produk::all(); // Ambil semua data

        return view('produk.index', [
            'produk' => $produk
        ]);
    }
}

Buat View Blade dengan Tabel HTML

Di sinilah keajaibannya terjadi. Kita buat tabel HTML biasa, lalu inisialisasi DataTables dengan data JSON yang sudah disiapkan dari controller.

resources/views/produk/index.blade.php

{{-- Extend layout utama --}}
@extends('layouts.app')

@section('content')
<div class="container mt-4">
    <h3>Daftar Produk</h3>

    <table id="tabelProduk"
           class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>No</th>
                <th>Nama Produk</th>
                <th>Kategori</th>
                <th>Harga</th>
                <th>Stok</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
@endsection

@push('scripts')
<script>
// Data JSON dari Laravel (client-side mode)
const dataProduk = @json($produk);

$(function() {
    $('#tabelProduk').DataTable({
        data: dataProduk,
        columns: [
            {
                data: null,
                render: function(data, type, row, meta) {
                    return meta.row + 1;
                }
            },
            { data: 'nama' },
            { data: 'kategori' },
            {
                data: 'harga',
                render: function(data) {
                    return 'Rp ' + data.toLocaleString('id-ID');
                }
            },
            { data: 'stok' }
        ],
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json'
        }
    });
});
</script>
@endpush

⚡

Insight Penting

Perhatikan penggunaan @json($produk) di Blade — ini adalah cara resmi Laravel untuk mengubah Collection/Array PHP menjadi JSON yang aman (sudah di-escape XSS). Jangan pernah pakai json_encode() langsung di Blade tanpa escaping!

✨ Fitur Tambahan DataTables Client-Side Laravel yang Wajib Kamu Tahu

Sudah berhasil nampilin data? Bagus! Sekarang kita tambah beberapa fitur keren yang membuat tabelmu semakin powerful. Dengan datatables client side laravel, kamu bisa melakukan banyak hal dengan sedikit kode tambahan.

Tambahkan Kolom Aksi (Edit & Hapus)

Tambahkan kolom Aksi dengan tombol Edit dan Hapus yang menggunakan ID dari setiap baris data.

Tambahkan kolom ini ke dalam array columns

{
    data: 'id',
    orderable: false,
    searchable: false,
    render: function(id) {
        return `
            <a href="/produk/${id}/edit"
               class="btn btn-sm btn-warning">Edit</a>
            <button onclick="hapusProduk(${id})"
               class="btn btn-sm btn-danger">Hapus</button>
        `;
    }
}

Aktifkan Fitur Export (CSV, Excel, PDF)

Tambahkan Buttons Extension untuk fitur ekspor data — ini fitur yang paling sering diminta klien!

Tambahkan CDN Buttons + inisialisasi

<!-- CDN Buttons Extension (di head) -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap4.min.css">

<!-- CDN Buttons JS (setelah dataTables JS) -->
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>

// Tambahkan ke opsi DataTable():
dom: 'Bfrtip',
buttons: ['copy', 'csv', 'excel', 'pdf', 'print']

📊 Analisis: Kapan Harus Berhenti Pakai Client-Side?

Berikut tanda-tanda kamu sudah perlu beralih ke mode server-side:

⚠️ Jumlah data > 5.000 baris — halaman mulai loading lambat saat pertama dibuka

⚠️ Data real-time — data berubah setiap saat dan harus selalu fresh dari database

⚠️ Data sensitif — tidak aman mengirim semua data sekaligus ke browser pengguna

⚠️ Memori browser terbatas — data besar bisa menyebabkan tab browser crash

🌐 Lokalisasi: Tampilkan DataTables dalam Bahasa Indonesia

Secara default, DataTables menampilkan teks dalam Bahasa Inggris. Untuk aplikasi berbahasa Indonesia, kamu bisa mengganti teksnya dengan dua cara. Cara pertama adalah menggunakan CDN file bahasa Indonesia dari DataTables sendiri (seperti yang sudah kita lakukan di Step 3 dengan opsi language.url). Cara kedua adalah mendefinisikannya secara manual untuk kontrol penuh:

Konfigurasi bahasa manual (opsional)

language: {
    search:         "Cari:",
    lengthMenu:     "Tampilkan _MENU_ data per halaman",
    zeroRecords:    "Data tidak ditemukan",
    info:           "Menampilkan halaman _PAGE_ dari _PAGES_",
    infoEmpty:      "Tidak ada data tersedia",
    infoFiltered:   "(disaring dari _MAX_ total data)",
    paginate: {
        first:    "Pertama",
        last:     "Terakhir",
        next:     "Selanjutnya",
        previous: "Sebelumnya"
    }
}

⚠️

Perhatian

Jika kamu menggunakan opsi language.url untuk memuat file JSON bahasa dari CDN, pastikan ada koneksi internet saat menguji. Untuk deployment production, lebih disarankan menyimpan file JSON bahasa tersebut secara lokal di folder public/ agar tidak bergantung pada CDN eksternal.

✦ Kesimpulan

Tabel Interaktif Bukan Lagi Mimpi! 🎉

Di artikel ini kita sudah menguasai cara implementasi datatables client side laravel dari nol hingga tabel yang siap production. Berikut rangkuman yang perlu kamu ingat:

✅ Client-side DataTables memuat semua data di browser — cocok untuk data < 10.000 baris

✅ Gunakan @json($data) Blade directive untuk konversi data Laravel ke JSON yang aman

✅ Fitur export CSV/Excel/PDF bisa ditambahkan dengan Buttons Extension tambahan

✅ Lokalisasi ke Bahasa Indonesia sangat mudah dengan opsi language

Artikel ini adalah bagian dari Seri Belajar Laravel Lengkap (50 Artikel). Di artikel selanjutnya, kita akan naik level ke Server-Side DataTables untuk menangani data dalam jumlah besar dengan performa optimal.

💬 Tinggalkan Komentar 🔔 Subscribe Seri Ini 📤 Share Artikel

#Laravel #DataTables #PHP #ClientSide #jQuery #Tutorial #BejarLaravel

← Artikel Sebelumnya

Artikel 44

Instalasi dan Setup Yajra DataTables di Laravel

Baca Artikel →

Artikel Selanjutnya →

Artikel 46

DataTables Server-Side: Performa Optimal untuk Data Besar

Baca Artikel →

📚 Ini adalah bagian dari Seri Belajar Laravel Lengkap — 50 artikel yang membawamu dari nol hingga mahir Laravel. Lihat semua artikel →