Implementasi Yajra Datatables Server Side Di Laravel
• 9 min read • 6385 views
Laravel Yajra Datatables Server Side - Seperti yang telah disampaikan pada artikel sebelumnya, Yajra Datatables adalah sebuah third party package yang sangat berguna dalam membangun tabel interaktif di aplikasi web Laravel. Dengan menggunakan Yajra Datatables, Kita dapat mengintegrasikan fungsi sorting, searching, dan pagination yang powerfull dengan mudah, sehingga memudahkan user untuk mengelola dan menganalisis data dengan cepat.
Salah satu fitur yang sangat menarik dari Yajra Datatables adalah kemampuannya dalam mengimplementasikan server-side processing. Server-side processing adalah pendekatan yang memungkinkan Kita untuk mengambil dan memproses data secara efisien langsung dari server, daripada memuat semua data ke dalam browser user (client). Hal ini sangat berguna ketika Kita memiliki dataset yang besar, karena hanya data yang ditampilkan yang diambil dari server, mengurangi waktu respons aplikasi dan meminimalkan penggunaan resource.
Dan di artikel ini saya akan membagikan bagaimana cara mengimplementasikan Yajra datatables server side di Laravel. 👇
Table of Contents
Step 1: Install Laravel
Pada step awal, saya akan mengajak kalian untuk menginstall fresh laravel project yang akan kita gunakan untuk kebutuhan tutorial ini. Jika kalian sudah punya laravel project, kalian bisa mengabaikan step ini. Disini saya akan menginstall laravel project dengan nama laravel-yajra-datatables.
laravel new laravel-yajra-datatablesStep 2: Setup Database
Selesai di langkah pertama, kita lanjutkan ke langkah kedua yaitu membuat database baru untuk menampung data yang akan akan digunakan. Jika sudah selesai membuat database baru, jangan lupa untuk menyesuaikan value pada key DB_DATABASE di file .ENV seperti pada contoh di bawah ini.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_yajra_datatables
DB_USERNAME=root
DB_PASSWORD=Step 3: Generate Data Dummy
By default, laravel telah menyediakan file migration untuk membuat table user dengan field name, email, email_verified_at dan lain-lain. File tersebut terletak di database/migration/{timestamp}_create_users_table.php. Nah di file ini, kita akan memperbarui sedikit dengan menambahkan field username dan phone. Sesuaikan kode yang ada di file migration tersebut dengan kode seperti di bawah ini.
public function up(): void
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('username');
$table->string('phone');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->rememberToken();
$table->timestamps();
});
}Kemudian, jalankan perintah migrate.
php artisan migrateOke, kita geser sedikit ke file UserFactory. Kita akan membuat data dummy untuk tabel user dan akan menampilkan data-data dari tabel user tersebut menggunakan laravel yajra datatables package. Buka file yang terletak di database/factories/UserFactory.php dan sesuaikan kode yang ada dengan kode seperti di bawah ini.
public function definition(): array
{
$name = fake()->name();
$username = Str::of($name)->lower()->replace(' ', '_');
return [
'name' => $name,
'username' => $username,
'phone' => fake()->phoneNumber(),
'email' => fake()->unique()->safeEmail(),
'email_verified_at' => now(),
'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
'remember_token' => Str::random(10),
];
}Kemudian kita akan mengeksekusi file UserFactory tersebut menggunakan tinker. Buka terminal, kemudian jalankan perintah php artisan tinker dan dilanjutkan dengan menjalankan perintah User::factory()->count(5000)->create() untuk mulai generate 5000 data dummy user.
php artisan tinker
User::factory()->count(50000)->create()Step 4: Install Yajra Datatables
Setelah itu, Kita dapat menginstal Yajra Datatables package dengan menggunakan Composer. Buka terminal atau command prompt, dan jalankan perintah berikut:
composer require yajra/laravel-datatables-oracle:"^10.3.1"Step 5: Generate & Setup Controller
Berikutnya, kita akan membuat controller baru, yang nantinya controller tersebut akan kita gunakan untuk mengambil data dari tabel users dan menampilkannya dengan yajra datatables. Jalankan perintah artisan seperti di bawah ini untuk generate file UserController.
php artisan make:controller UserControllerKemudian, buka file UserController yang baru saja dibuat tersebut dan ubah kodenya seperti di bawah ini.
<?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(){
if (request()->ajax()) {
$users = User::query();
return DataTables::of($users)
->addIndexColumn()
->addColumn('action', function ($item) {
$button = '<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
</ul>
</div> ';
return $button;
})
->make();
}
return view('welcome');
}
}Coba perhatikan betul-betul. Disini kita akan menambahkan addIndexColumn yang digunakan untuk menambahkan kolom index (nomor urut) ke dalam tabel yang dibuat menggunakan Yajra Datatables. Kolom index ini akan menampilkan nomor urut secara berurutan untuk setiap baris dalam tabel. Sedangkan Fungsi addColumn pada Yajra Datatables digunakan untuk menambahkan kolom baru ke dalam tabel yang dibuat menggunakan Yajra Datatables. Kolom baru ini dapat berisi data statis atau dihasilkan dari data yang ada dalam setiap baris tabel.
Pada contoh di atas, kita menggunakan fungsi addColumn untuk menambahkan kolom "Action" dengan action dropdown button untuk setiap baris tabel.
Dengan menggunakan addColumn, Kita dapat dengan fleksibel menambahkan kolom-kolom baru ke dalam tabel yang dibuat menggunakan Yajra Datatables dan memanipulasi data yang ditampilkan dalam kolom tersebut sesuai dengan kebutuhan Kita.
Step 6: Setup View
Terakhir, silahkan buka file welcome.blade.php, kemudian copy semua kode di bawah ini dan replace di file welcome.blade.php tersebut.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Yajra Datatables</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<div class="container py-5">
<div class="row">
<h2 class="fs-5 fw-bold text-center mb-4">
Laravel Yajra Datatables
</h2>
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table id="userTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Username</th>
<th>Phone</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#userTable').DataTable({
processing: true,
serverSide: true,
ajax: '{{ url()->current() }}',
columns: [
{
data: 'DT_RowIndex',
name: 'DT_RowIndex',
orderable: false,
searchable: false,
width: '5%'
},
{
data: 'name',
name: 'name',
orderable: true,
searchable: true,
width: '25%'
},
{
data: 'username',
name: 'username',
orderable: true,
searchable: true,
width: '20%'
},
{
data: 'phone',
name: 'phone',
orderable: true,
searchable: true,
width: '20%'
},
{
data: 'email',
name: 'email',
orderable: true,
searchable: true,
width: '20%'
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false,
width: '10%'
}
]
});
});
</script>
</body>
</html>Kode di atas akan membuat tabel menggunakan Yajra Datatables dengan pengaturan server-side processing. Perhatikan bagian ajax di mana kita menggunakan route yang aktif di halaman tersebut menggunakan {{ url()->current() }}.
Testing
Terakhir, jalankan aplikasi Laravel kalian dan buka halaman welcome yang mengakses tampilan tabel user seperti di bawah ini.
Kalian sekarang akan melihat tabel yang menampilkan data user dengan fungsi sorting, searching, dan pagination yang diimplementasikan menggunakan Yajra Datatables package.
Dengan demikian, Kita telah berhasil mengimplementasikan Yajra Datatables server-side di Laravel. Kalian dapat menerapkan pendekatan yang sama untuk entitas lain dalam aplikasi Kalian. Yajra Datatables membantu meningkatkan pengalaman pengguna dengan menghadirkan tabel yang interaktif dan responsif, memungkinkan user untuk dengan mudah mengelola dan menganalisis data.
Last updated on June 03, 2026
