📚 SERI BELAJAR LARAVEL LENGKAP Artikel 43 dari 50

Mengenal DataTables:
Tabel Interaktif untuk
Aplikasi Laravel

Bosan dengan tabel HTML statis yang nggak bisa di-search, sort, atau filter? Saatnya upgrade ke DataTables di Laravel — solusi tabel interaktif yang dipakai jutaan developer dunia.

#DataTables #Laravel #PHP #JavaScript #WebDev

⏱ 12

Menit Baca

⚡ Menengah

Level

🗓 2025

Diperbarui

Pernah nggak kamu bikin tabel data di aplikasi web, terus user komplain karena datanya nggak bisa di-search? Atau terpaksa scroll panjang banget karena semua 500 baris data muncul sekaligus tanpa pagination? Kalau iya, kamu butuh DataTables Laravel — plugin JavaScript yang bisa mengubah tabel HTML biasa jadi tabel interaktif super canggih hanya dengan beberapa baris kode.

Di artikel ke-43 dari Seri Belajar Laravel Lengkap ini, kita akan kupas tuntas apa itu DataTables, kenapa ini jadi senjata wajib para developer Laravel, dan bagaimana cara kerjanya sebelum kita praktik instalasi di artikel berikutnya. Yuk mulai!

Apa Itu DataTables dan Kenapa Laravel Cocok Banget?

Bayangkan kamu lagi di perpustakaan yang punya 10.000 buku. Kalau semua buku dijejer di satu rak tanpa label, tanpa urutan, dan kamu harus baca satu per satu untuk nemuin buku yang kamu cari — menyiksa banget kan? Nah, itulah yang terjadi saat kamu tampilkan ratusan atau ribuan data dalam tabel HTML biasa.

DataTables adalah plugin jQuery yang mengubah tabel HTML statis menjadi tabel interaktif dengan fitur pencarian, pengurutan, dan paginasi secara otomatis. Anggap saja DataTables itu seperti "search engine kecil" yang ada di dalam tabelmu sendiri.

📌 Definisi Penting

"DataTables adalah plugin jQuery open-source yang menambahkan fitur interaktivitas canggih ke tabel HTML — mulai dari search, sort, filter, pagination, hingga Ajax loading data dari server."

🔗 Sumber: datatables.net — digunakan di 5+ juta website worldwide

🔥 Fakta Menarik

DataTables pertama kali dirilis tahun 2008 oleh Allan Jardine. Lebih dari 15 tahun kemudian, plugin ini masih aktif dikembangkan dan jadi salah satu jQuery plugin paling populer di dunia dengan 35.000+ bintang di GitHub.

Lalu kenapa DataTables Laravel jadi kombinasi yang powerful? Karena Laravel punya Eloquent ORM yang bisa mengambil data dari database dengan sangat efisien, dan DataTables bisa diintegrasikan untuk memproses data tersebut di sisi server (Server-Side Processing) — sehingga meski datamu ada jutaan baris, aplikasimu tetap ringan dan cepat!

📊 Tabel vs DataTables: Perbandingan Langsung

Fitur	Tabel HTML Biasa	DataTables Laravel
Pencarian Data	❌ Tidak ada	✅ Real-time search
Pengurutan Kolom	❌ Manual	✅ Klik header kolom
Pagination	❌ Semua tampil	✅ Otomatis terpaginasi
Performa Data Besar	❌ Lambat / crash	✅ Server-side processing
Export (Excel, PDF)	❌ Perlu coding ekstra	✅ Built-in buttons
Responsif Mobile	⚠️ Perlu CSS manual	✅ Extension Responsive

Cara Kerja DataTables Laravel: Client-Side vs Server-Side

Sebelum mulai coding, kamu perlu paham dua mode pengoperasian DataTables Laravel yang punya perbedaan fundamental. Salah pilih mode, performa aplikasimu bisa jomplang!

🔍 Analisis: Client-Side vs Server-Side Processing

💻 Client-Side

Semua data dikirim ke browser sekaligus, lalu DataTables mengolahnya di sisi klien.

✅ Setup mudah & cepat

✅ Cocok untuk data < 5.000 baris

❌ Lambat jika data sangat banyak

🖥️ Server-Side

Browser hanya minta data yang diperlukan, server (Laravel) yang filter & paginate.

✅ Performa tetap stabil jutaan data

✅ Hemat memori browser

❌ Setup sedikit lebih kompleks

💡 Tips Pemilihan Mode

Pakai Client-Side jika data kamu di bawah 5.000 baris dan jarang berubah. Pakai Server-Side jika data bisa mencapai ribuan atau terus bertambah (misalnya tabel transaksi, log, atau data user skala besar). Untuk proyek skripsi atau tugas kuliah, Client-Side biasanya sudah cukup!

Dalam ekosistem Laravel, ada sebuah package populer bernama Yajra DataTables yang menjadi jembatan antara DataTables JavaScript dan Eloquent/Query Builder Laravel. Package ini yang akan kita pakai di artikel selanjutnya.

Fitur-Fitur Unggulan DataTables yang Wajib Kamu Tahu

Bukan cuma search dan sort, DataTables punya segudang fitur yang bikin tampilan data di aplikasi Laravel kamu makin keren. Mari kita bedah satu per satu dengan contoh kode dasarnya!

Inisialisasi DataTables Dasar

Cara termudah mengaktifkan DataTables adalah dengan memanggil method .DataTable() pada elemen tabel. Pastikan jQuery dan library DataTables sudah di-include lebih dulu.

resources/views/mahasiswa/index.blade.php

<!-- Tambahkan CDN DataTables di <head> -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">

<!-- Tabel HTML dengan id unik -->
<table id="tableMahasiswa" class="table table-bordered">
    <thead>
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>NIM</th>
            <th>Jurusan</th>
            <th>Aksi</th>
        </tr>
    </thead>
</table>

<!-- Inisialisasi DataTables -->
<script>
    $(document).ready(function() {
        $('#tableMahasiswa').DataTable({
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json'
            }
        });
    });
</script>

Konfigurasi Server-Side dengan Ajax di Laravel

Untuk data besar, DataTables akan mengirim request Ajax ke route Laravel. Di sinilah Yajra DataTables berperan memproses query dan mengembalikan respons JSON yang sesuai format.

app/Http/Controllers/MahasiswaController.php

use Yajra\DataTables\Facades\DataTables;

class MahasiswaController extends Controller
{
    public function index(Request $request)
    {
        // Jika request dari DataTables (Ajax)
        if ($request->ajax()) {
            $data = Mahasiswa::select('*');

            return DataTables::of($data)
                ->addIndexColumn() // Kolom nomor otomatis
                ->addColumn('aksi', function($row) {
                    return '<a href="mahasiswa/'.$row->id.
                           '" class="btn btn-sm btn-warning">Edit</a>';
                })
                ->rawColumns(['aksi'])
                ->make(true);
        }

        return view('mahasiswa.index');
    }
}

Konfigurasi DataTables di View (Ajax Mode)

Di sisi view, DataTables perlu diberi tahu URL Ajax dan definisi kolom yang akan ditampilkan agar bisa memanggil controller Laravel dengan benar.

Script DataTables di blade view

$('#tableMahasiswa').DataTable({
    processing: true,     // Tampilkan loading spinner
    serverSide: true,     // Aktifkan server-side mode
    ajax: '{{ route("mahasiswa.index") }}',
    columns: [
        { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false },
        { data: 'nama',       name: 'nama' },
        { data: 'nim',        name: 'nim' },
        { data: 'jurusan',   name: 'jurusan' },
        { data: 'aksi',     name: 'aksi', orderable: false }
    ],
    language: {
        url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/id.json'
    }
});

⚡ Insight Penting

Perhatikan penggunaan rawColumns(['aksi']) di controller. Ini wajib kamu tambahkan jika kolom berisi HTML (seperti tombol atau link). Tanpa ini, HTML akan di-escape dan tampil sebagai teks biasa!

Extensions DataTables Laravel yang Sering Dipakai

Kehebatan DataTables tidak berhenti di fitur dasarnya. Ada berbagai extension yang bisa kamu tambahkan untuk memperkaya fitur tabel di aplikasi datatables laravel kamu. Ini yang paling sering dipakai developer Indonesia:

📤

Buttons Extension

Tambahkan tombol export ke Excel, PDF, CSV, dan Print langsung dari tabel. Cocok untuk laporan data.

📱

Responsive Extension

Otomatis menyembunyikan kolom di layar kecil dan menampilkannya dalam toggle. Tabel tetap rapi di HP.

🔍

SearchPanes Extension

Panel filter faceted (seperti filter di Tokopedia) untuk setiap kolom. Filter multi-pilih yang intuitif.

🔒

FixedColumns Extension

Kunci kolom pertama (misalnya No. atau Nama) agar tetap terlihat saat scroll horizontal di tabel lebar.

⚠️ Perhatian

Jangan lupa include file CSS dan JS untuk setiap extension yang kamu pakai. DataTables menggunakan sistem modular — extension yang tidak di-include tidak akan berfungsi, bahkan bisa menyebabkan error JavaScript yang membingungkan. Selalu cek dokumentasi resmi di datatables.net.

⚡ Pro Insight: DataTables + Bootstrap 5

DataTables punya versi build khusus yang terintegrasi dengan Bootstrap 4 maupun Bootstrap 5. Gunakan versi dataTables.bootstrap5.min.css agar tampilan tombol, pagination, dan search field otomatis mengikuti style Bootstrap yang sudah ada di proyekmu — hasilnya jauh lebih konsisten dan profesional!

🧩 Ekosistem DataTables Laravel

🗄️

MySQL

Database

→

⚙️

Yajra DT

Laravel Package

→

📊

DataTables

jQuery Plugin

Alur data: MySQL → Eloquent/Query Builder → Yajra DataTables → JSON Response → DataTables JS

📋 Kesimpulan

DataTables Laravel: Investasi Terbaik untuk UX Aplikasimu

Di artikel ini, kita telah mengenal DataTables Laravel dari berbagai sudut — mulai dari apa itu DataTables, perbedaan Client-Side vs Server-Side processing, contoh kode inisialisasi dasar, konfigurasi Ajax dengan Yajra, hingga berbagai extension yang bisa memperkaya fiturnya. Beberapa poin kunci yang perlu kamu ingat:

DataTables mengubah tabel HTML statis menjadi tabel interaktif dengan search, sort, dan pagination otomatis
Gunakan Client-Side untuk data kecil, Server-Side untuk data besar (pakai Yajra DataTables)
Extension seperti Buttons, Responsive, dan SearchPanes menambah nilai lebih pada tabelmu
Selalu tambahkan rawColumns() jika ada kolom yang berisi HTML
Pakai build Bootstrap untuk konsistensi tampilan dengan framework CSS-mu

Artikel berikutnya kita akan langsung praktik: instalasi Yajra DataTables di Laravel dari nol sampai tabel interaktif pertamamu berjalan! Jangan sampai ketinggalan.

💬 Tinggalkan Komentar 📤 Share Artikel Ini 🔔 Subscribe Update

🏷️ Tag Artikel

#DataTables #Laravel #PHP #Yajra #jQuery #WebDevelopment #TutorialLaravel #BelajarLaravel

🗺️ Navigasi Seri Belajar Laravel

← Artikel Sebelumnya

Artikel 42

Testing di Laravel: Unit Test dan Feature Test

Pastikan kode kamu bebas bug sebelum production 🧪

Artikel Selanjutnya →

Artikel 44

Instalasi dan Setup Yajra DataTables di Laravel

Praktik langsung dari composer install hingga tabel berjalan ⚡