Assalamualaikum Warrohmatulloh Wabarokatuh, seringkali kita sebagai programmer dihadapkan pada situasi untuk menampilkan data dalam bentuk tabel. Mungkin pekerjaan ini tidak terlalu berat karena cukup mudah untuk dilakukan. Namun untuk meningkatkan user experience pengguna aplikasi kita dari tabel tersebut dibutuhkan pencarian, sortir atau atau filter data yang komprehensif.
DataTable adalah sebuah library yang akan memudahkan kita untuk menyajikan data berbentuk tabel dengan fitur pencarian, sortir secara realtime dengan mudah. Namun, seringkali kita yang tidak secara detail membaca dokumentasi akan mengimplementasikan dengan cara client side yang akan tidak optimal ketika memuat banyak data.
Pada tulisan ini kita akan membahas penggunaan DataTable secara server side pada framework Laravel dengan bantuan package dari Yajra.
Cara menginstal DataTable pada Framework Laravel
Saat tulisan ini dibuat versi Laravel yang digunakan versi 8. Untuk versi lama atau versi mendatang mungkin ada perbedaan pada versi DataTable yang kompatibel bisa menuju tautan ini. Saya asumsikan kawan-kawan sudah menginstal atau memiliki proyek Laravel.
Berikutnya, buka terminal dan ketikkan, atau copas saja perintah di bawah ini
composer require yajra/laravel-datatables-oracle:"~9.0"
Membuat Data Contoh
Untuk keperluan testing kita membutuhkan data contoh, kita gunakan tabel users yang sudah tersedia dari instalasi Laravel.
Kita akan gunakan factory untuk membuat data contohnya, untuk mengeksekusi perintahnya kita gunakan tinker.
php artisan tinker
Kita buat 100 data contoh user ntuk menguji DataTable, jalankan perintah ini pada tinker.
App\Models\User::factory()->count(100)->create();Akan muncul penampakan seperti di bawah ini jika sukses & selesai eksekusi perintahnya.
Untuk memastikan bahwa data sudah benar-benar ada di database silakan cek databasenya.
Data users hasil factory
Menampilkan Data JSON
Bagian yang ditunggu tunggu nih, mari kita tampilkan datanya ke dalam DataTable, buat controller dulu.
php artisan make:controller UserController<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
use Yajra\DataTables\Facades\DataTables;
class UserController extends Controller
{
public function data()
{
return DataTables::of(User::query())->toJson();
}
public function index()
{
return view('user.index');
}
}
Kemudian daftarkan fungsi di atas ke route di web.php.
Route::get('/user/json', [\App\Http\Controllers\UserController::class, 'data'])->name('user.data');
Route::get('/user', [\App\Http\Controllers\UserController::class, 'index'])->name('user.index');Akses URL http://localhost:8000/user/json, seharusnya muncul seperti gambar di bawah ini, oh ya tampilannya bisa bagus soalnya pakai chrome extension JSONView.
Kalau sudah tampil seperti itu, berarti datanya sudah siap untuk digunakan.
Membuat View Untuk Menampilkan Datatable
Sesudah data bisa digunakan sekarang waktunya membuat file view di dalam folder resources/views, buat folder baru dengan nama user dan buat file blade dengan nama index.blade.php di dalamnya, jadi pathnya resources/views/user/index.blade.php.
Silakan copy paste kode di bawah ini, serta baca sedikit komentarnya biar paham :P.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<title>Laravel DataTable</title>
</head>
<body>
<div class="container">
<table class="table table-bordered" id="users-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Created At</th>
<th>Updated At</th>
</tr>
</thead>
</table>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function() {
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: '{!! route('user.data') !!}', // memanggil route yang menampilkan data json
columns: [{ // mengambil & menampilkan kolom sesuai tabel database
data: 'id',
name: 'id'
},
{
data: 'name',
name: 'name'
},
{
data: 'email',
name: 'email'
},
{
data: 'created_at',
name: 'created_at'
},
{
data: 'updated_at',
name: 'updated_at'
}
]
});
});
</script>
</body>
</html>
Maka akan tampil sebuah tabel yang kurang lebih tampilannya seperti ini jika kita akses http://localhost:8000/user.
Refactor Kode Agar Lebih Sederhana
Mari kita lakukan sedikit refactor pada kode kita, mulai dari controller, kita ubah menjadi seperti 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(Request $request)
{
if ($request->ajax()) {
return DataTables::of(User::query())->toJson();
}
return view('user.index');
}
}
Kenapa bisa begitu? Jadi, pada file view user/index.blade.php request yang dikirim berupa request ajax jadi kita bisa taruh fungsinya menjadi dalam satu method.
Upsss, tapi ini menjadikan kode yang tadi sudah berjalan menjadi error seperti ini.
Tentu saja error karena kita menghapus method data() pada UserController sebelumya. Jadi kita perlu memperbarui juga pemanggilannya pada view user/index.blade.php tepatnya pada bagian ini.
ajax: '{!! route('user.data') !!}'Ubah pemanggilannya ke route user.index, karena sekarang data JSON ditampilkan pada route yang sama, menjadi seperti ini.
ajax: '{!! route('user.index') !!}'Coba akses ulang http://localhost:8000/user, BOOM, sudah berfungsi kembail dan datatable sudah tampil.
Hapus route di bawah ini dari file web.php.
Route::get('/user/json', [\App\Http\Controllers\UserController::class, 'data'])->name('user.data');Baris tersebut sudah tidak kita gunakan lagi karena kita sudah memindahkan fungsinya ke dalam method index().
Wassalamualaikum Warrohmatulloh Wabarokatuh.
makasih bang amirul, sukses selalu
terima kasih mas 🙂
cara nambahin button disini gimana mas?
bisa dengan addColumn()