Implementasi Eager Loading di Yajra Datatables Server Side
• 8 min read • 5064 views
Dalam pengembangan aplikasi web menggunakan framework Laravel, sering kali kita perlu bekerja dengan data yang berhubungan antara model-model yang berbeda. Laravel menyediakan fitur yang kuat untuk mengelola hubungan ini, yang dikenal sebagai "Eloquent Relationships". Namun, ketika kita menggunakan komponen seperti Laravel Yajra Datatables untuk menampilkan data dengan metode server side, dapat menjadi tantangan untuk memuat hubungan antara model-model secara efisien.
Di artikel ini, kita akan menjelajahi implementasi eager loading relationships di Laravel Yajra Datatables server side. Eager loading adalah teknik yang memungkinkan kita untuk memuat semua data yang saling terkait yang dibutuhkan dalam satu request query, menghindari masalah N+1 query yang berlebihan. Laravel Yajra Datatables adalah package yang memungkinkan kita membuat tabel data yang interaktif dan efisien dengan dukungan server side processing.
Oke langsung saja saya akan membagikan cara bagaimana mengimplementasikan eager loading di yajra datatables. 👇 🚀
Step 1: Generate Model, Migration & Post Factory
Pertama, mari kita generate model, migration dan Post Factory secara bersamaan dengan menjalankan perintah seperti di bawah ini.
php artisan make:model Post -mfLanjut, buka file migration yang terletak di database/migrations/{timestamp}_create_posts_table.php dan tambahkan kode seperti di bawah ini.
public function up(): void
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->foreignId('user_id');
$table->string('title');
$table->string('slug')->unique();
$table->longText('content');
$table->timestamps();
});
}Pada tabel posts, kita akan menambahkan column user_id yang berelasi dengan tabel users. Kemudian, jalankan perintah migrate.
php artisan migrateOke, kita geser sedikit ke file PostFactory. Kita akan membuat data dummy untuk tabel posts dan akan menampilkan data-data dari tabel posts 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
{
$user = \App\Models\User::inRandomOrder()->first();
$title = $this->faker->sentence();
$slug = \Str::slug($title);
return [
'user_id' => $user->id,
'title' => $title,
'slug' => $slug,
'content' => $this->faker->paragraph(),
];
}Kemudian kita akan mengeksekusi file PostFactory tersebut menggunakan tinker. Buka terminal, kemudian jalankan perintah php artisan tinker dan dilanjutkan dengan menjalankan perintah Post::factory()->count(100)->create() untuk mulai generate 100 data dummy posts.
php artisan tinker
Post::factory()->count(100)->create()Jika muncul Error Class "Post" not found. saat menjalankan factory, coba jalankan composer dumpautoload dan coba ulangi lagi perintah factory.
Step 2: Setup Model
Kita perlu mendefinisikan model Eloquent dan relasinya. Misalnya, kita akan bekerja dengan model Post dan model User, di mana setiap post pasti memiliki user yang membuatnya. Relasi ini didefinisikan dalam model Post dengan method user() seperti di bawah ini.
public function user() {
return $this->belongsTo(User::class);
}Step 3: Generate & Setup PostController
Selanjutnya, kita buat controller baru dengan nama PostController untuk menampilkan data dari tabel posts ke dalam datatables. Jalankan perintah seperti di bawah ini untuk membuat PostController.
php artisan make:controller PostControllerSetelah PostController berhasil dibuat, silakan buka PostController tersebut dan tambahkan method index dengan kode seperti di bawah ini.
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
use Yajra\DataTables\Facades\DataTables;
class PostController extends Controller
{
public function index(){
if (request()->ajax()) {
$users = Post::with('user');
return DataTables::of($users)
->addIndexColumn()
->editColumn('content', function ($item) {
return \Str::limit($item->content, 100, '...');
})
->addColumn('user', function ($item) {
return $item->user->name;
})
->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('posts');
}
}Pada contoh di atas, kita menggunakan editColumn untuk mengubah data content atau membatasi jumlah karakter yang akan ditampilkan pada datatables. Selain itu kita juga menambahkan addColumn() untuk menambahkan kolom baru ke datatable. Dalam kasus ini, kita menambahkan kolom "user" yang menampilkan nama user yang memiliki post tersebut.
Di method index(), sebelum kita mengembalikan datatable JSON, kita akan menggunakan metode with() untuk memuat relasi user secara eager loading:
Dengan menggunakan with('user'), kita memastikan bahwa relasi user dimuat dalam satu query, daripada melakukan query terpisah untuk setiap penggunaan. Ini akan meningkatkan kinerja aplikasi kita secara signifikan, terutama ketika kita memiliki jumlah data yang besar.
Dengan mengimplementasikan eager loading relationships di Laravel Yajra Datatables server side, kita dapat mengoptimalkan kinerja aplikasi dan menghindari masalah N+1 query yang berlebihan. Dengan cara ini, kita dapat memastikan bahwa penggunaan resource database menjadi lebih efisien dan response aplikasi menjadi lebih cepat.
Step 4: Setup View
Oke, kita lanjut ke view. Silakan buat file view baru dengan nama posts.blade.php, dan tambahkan kode seperti di bawah ini. Pada file view ini, tidak jauh berbeda dengan file welcome.blade.php yang telah kita gunakan pada artikel sebelumnya. Disini kita hanya memetakan data-data yang akan ditampilkan pada tabel post.
<!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="postTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Content</th>
<th>User</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 () {
$('#postTable').DataTable({
processing: true,
serverSide: true,
ajax: '{{ url()->current() }}',
columns: [
{
data: 'DT_RowIndex',
name: 'DT_RowIndex',
orderable: false,
searchable: false,
width: '5%'
},
{
data: 'title',
name: 'title',
orderable: true,
searchable: true,
width: '25%'
},
{
data: 'content',
name: 'content',
orderable: true,
searchable: true,
width: '40%'
},
{
data: 'user',
name: 'user.name',
orderable: true,
searchable: true,
width: '20%'
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false,
width: '10%'
}
]
});
});
</script>
</body>
</html>data: user merepresentasikan data key (data.user) yang akan kita tampilkan pada tabel. Sedangkan name: user.name merepresentasikan relasi antara model Post dengan User dan column yang bisa dicari (name)
Step 5: Setup Route
Setelah menyiapkan controller dan view, kita bisa menambahkan route baru yang akan kita arahkan ke method index pada Class PostController.
Route::get('posts', [\App\Http\Controllers\PostController::class, 'index']);Step 6: Testing
Terakhir, kita bisa mencoba apa yang telah kita buat di artikel ini dengan cara menjalankan aplikasi Laravel kita dan buka halaman posts yang mengakses tampilan tabel post seperti di bawah ini.
Demikianlah implementasi Eager Loading Relationships di Laravel Yajra Datatables server side. Dengan memanfaatkan fitur-fitur ini, Kita dapat mengembangkan aplikasi web yang efisien dan responsif dengan menggunakan Laravel dan Yajra Datatables. Selamat mencoba! 👨💻 🚀
Last updated on June 04, 2026
