Cara Mudah Membuat DataTable Server Side di Laravel

19/02/2025

Pada aplikasi web yang menampilkan data dalam jumlah besar, pemrosesan data pada sisi server menjadi pilihan terbaik. Hal ini dikarenakan ketika data yang harus di-render mencapai ribuan baris, pemrosesan di sisi client (browser) akan menimbulkan beban yang berat sehingga memperlambat tampilan dan interaksi. Dengan menerapkan server side processing, beban pengolahan data dialihkan ke server yang umumnya memiliki kapasitas lebih besar, sehingga data dapat difilter, diurutkan, dan diproses dengan lebih cepat serta responsif. Metode ini juga mengurangi penggunaan memori dan meningkatkan performa secara signifikan, terutama untuk aplikasi dengan data dinamis yang terus berkembang.

Package Yajra DataTables memberikan banyak kelebihan bagi pengembang Laravel. Dengan package ini, implementasi fitur DataTable server side menjadi lebih mudah dan terintegrasi secara seamless dengan Laravel. Di antaranya, Yajra menyediakan antarmuka yang sederhana untuk mengkonversi query Eloquent ke format JSON yang siap dikonsumsi oleh DataTables, mendukung fitur sorting, searching, dan pagination secara otomatis, serta menyediakan fleksibilitas dalam mengatur tampilan dan aksi pada tabel. Kelebihan-kelebihan tersebut membuat Yajra DataTables menjadi solusi ideal dalam mengelola data besar dengan performa tinggi.

Persiapan Proyek dan Data Contoh

Pada artikel ini, saya akan menggunakan Laravel versi 11. Sebelum mengimplementasikan DataTable server side, kita perlu menyiapkan data yang akan diproses ke dalam tabel. Data dalam jumlah besar bisa disiapkan dengan memanfaatkan fitur seeder dan factory di Laravel. Tutorial lebih lengkapnya dapat kamu simak pada artikel Tutorial Laravel: Membuat Seeder untuk RESTful API atau kamu bisa menggunakan Tinker dengan menjalankan satu per satu perintah berikut melalui terminal:

php artisan tinker  
App\Models\User::factory()->count(10000)->create();
exit

Perintah ini menghasilkan 10.000 data dummy. Pastikan factory untuk model User sudah dikonfigurasi dengan benar.

Install Package Yajra

Tambahkan package Yajra ke project Laravel:

composer require yajra/laravel-datatables

Buat Controller

Buat controller UserController:

php artisan make:controller UserController

Ganti kode yang ada di UserController.php dengan kode berikut:

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Yajra\DataTables\Facades\DataTables;

class UserController extends Controller
{
    public function index(Request $request) {
        if ($request->ajax()) {
            $users = User::select(['id', 'name', 'email', 'created_at']);

            return DataTables::of($users)
                ->addIndexColumn()
                ->editColumn('created_at', function ($user) {
                    return $user->created_at->format('d-m-Y');
                })
                ->addColumn('action', function ($user) {
                    return '<button class="btn-delete" data-id="'.$user->id.'">Hapus</button>';
                })
                ->rawColumns(['action'])
                ->make(true);
        }

        return view('users.index');
    }

    public function destroy($id)
    {
        try {
            $user = User::findOrFail($id);
            $user->delete();

            return response()->json(['success' => 'User berhasil dihapus!']);
        } catch (Exception $e) {
            return response()->json(['error' => 'Gagal menghapus user!'], 500);
        }
    }
}

Buat View untuk Tabel

Buat file resources/views/users/index.blade.php dan isi dengan kode berikut:

<!DOCTYPE html>  
<html lang="id">  
<head>  
    <meta charset="UTF-8">  
    <title>DataTable Server Side Laravel</title>  
    <link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet">  
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>  
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>  
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>  
</head>  
<body>  
    <table id="users-table" class="display">  
        <thead>  
            <tr>  
                <th>No</th>  
                <th>Nama</th>  
                <th>Email</th>  
                <th>Tanggal Bergabung</th>  
                <th>Aksi</th>  
            </tr>  
        </thead>  
    </table>  

    <script>  
        $(document).ready(function() {  
            let table = $('#users-table').DataTable({  
                processing: true,  
                serverSide: true,  
                ajax: "{{ route('users.index') }}",  
                columns: [  
                    { data: 'DT_RowIndex', orderable: false, searchable: false },  
                    { data: 'name' },  
                    { data: 'email' },  
                    { data: 'created_at' },  
                    { data: 'action', orderable: false, searchable: false }  
                ]  
            });  

            // Fungsi Hapus Data  
            $('#users-table').on('click', '.btn-delete', function() {  
                let userId = $(this).data('id');  
                Swal.fire({  
                    title: "Yakin ingin menghapus?",  
                    text: "Data tidak bisa dikembalikan!",  
                    icon: "warning",  
                    showCancelButton: true  
                }).then((result) => {  
                    if (result.isConfirmed) {  
                        $.ajax({  
                            url: `/users/${userId}`,  
                            type: "DELETE",  
                            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },  
                            success: () => {  
                                Swal.fire("Berhasil!", "Data terhapus.", "success");  
                                table.ajax.reload();  
                            }  
                        });  
                    }  
                });  
            });  
        });  
    </script>  
</body>  
</html>

Tambahkan Route

Update routes/web.php:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::get('/', function () {
    return redirect()->route('users.index');
});

Route::get('/users', [UserController::class, 'index'])->name('users.index');
Route::delete('/users/{id}', [UserController::class, 'destroy'])->name('users.destroy');

Jalankan dan Uji Aplikasi

Jalankan server dengan:

php artisan serve

Buka http://localhost:8000 di browser dan lihat hasil implementasinya. Cobalah untuk menghapus salah satu data di dalam tabel—dengan aksi hapus yang menggunakan metode AJAX, halaman tidak akan di-refresh saat data berhasil dihapus.

Implementasi DataTable secara server side memberikan berbagai keuntungan. Selain performa yang lebih baik dalam menangani data dalam jumlah besar, metode ini juga memberikan kemudahan dalam pengelolaan data melalui fitur-fitur seperti sorting, searching, dan pagination yang berjalan secara real time. Penggunaan AJAX untuk aksi-aksi seperti penghapusan data semakin meningkatkan user experience karena pengguna tidak perlu menunggu refresh halaman secara keseluruhan. Dengan demikian, penggunaan DataTable server side tidak hanya meningkatkan efisiensi, tetapi juga membuat aplikasi menjadi lebih interaktif dan responsif.

Untuk mempelajari lebih lanjut mengenai cara mengamankan aplikasi Laravel, terutama dalam hal validasi formulir, kamu bisa membaca artikel kami tentang Cara Menambahkan Verifikasi "I'm Not a Robot" di Laravel: Tingkatkan Keamanan Formulir dengan reCAPTCHA. Artikel tersebut membahas langkah demi langkah penerapan reCAPTCHA untuk meningkatkan keamanan dan mencegah spam pada aplikasi Laravel-mu.

Semoga artikel ini bermanfaat dan membantu kamu dalam mengimplementasikan DataTable server side di Laravel dengan mudah dan efektif!