Setelah sebelumnya saya membuat artikel mengenai Package Populer untuk Project Laravel, maka sekarang saya ingin menyajikan tutorial mengenai cara menggunakan Laravel Datatables. Apabila kita berbicara mengenai Laravel Datatable, maka lingkup yang akan dibahas adalah mengenai Server Side Processing pada jQuery Datatable.

Baca Juga https://adisparta.xyz/blog/package-populer-untuk-next-project-laravel-anda

JQuery Datatable

Sebelum anda menggunakan melanjutkan tutorial ini, anda harus tahu mengenai apa itu jQuery Datatable.

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

DataTables adalah plug-in untuk perpustakaan Javascript jQuery. Ini adalah alat yang sangat fleksibel, dibangun di atas dasar peningkatan progresif, yang menambahkan semua fitur canggih ini ke tabel HTML apa pun.

DataTables memberikan anda kemudahan dalam menyajikan data dalam bentuk tabel. Dimana plugin ini dapat memberikan anda fitur seperti searching, pagination, ordering, dan lain-lain.

Client Side dan Server Side Processing?

Sebelum melanjutkan, saya ingin sedikit menjelaskan mengenai tipe processing data pada DataTables. JQuery Datatable memiliki 2 tipe processing mode, yaitu

1. Client side processing, the full data set is loaded up-front and data processing is done in the browser. Yaitu semua data akan diload atau ditulis dari sisi frontend (dalam hal ini di HTML) kemudian jquery datatable yang akan membuatkan anda tampilan paginasi, searching, ordering, dan lain-lain.

   Sebagai contoh, apabila anda memiliki 100 data yang ditampilkan pada html, dengan menggunakan plugin ini, tampilan data anda akan diubah menjadi bentuk pagination. Yaitu data akan ditampilkan per 10 data. Data lainnya akan dihide dari sisi html oleh DataTables.

2. Server-side processing, an Ajax request is made for every table redraw, with only the data required for each display returned. The data processing is performed on the server. Yaitu data yang akan ditampilkan pada datatable akan diambil secara Ajax request.

   Pada saat inisialisasi, akan diambil data sebanyak 10 data dari server side anda. Selanjutnya, apabila user melakukan manipulasi tabel seperti searching, pindah halaman pagination, atau ordering, maka akan diambil ulang lagi 10 data dan tabel akan dimuat ulang.

Kedua tipe processing mode tersebut memiliki kelemahan dan kelebihan masing-masing sesuai kebutuhan anda.

Client side processing cocok dipergunakan untuk tabel yang datanya tidak terlalu banyak sekitaran 100 data kebawah dan pertumbuhan datanya lambat. Keuntungan dari mode ini adalah setup yang mudah dan performa yang lebih cepat ketika terjadi manipulasi tabel karena setiap proses manipulasi tidak merequest data ke server. Sedangkan kelemahannya adalah apabila datanya terlalu banyak, akan membebani proses di client.

Service side processing lebih cocok dipergunakan untuk tabel yang jumlah datanya banyak dan pertumbuhan datanya cepat. Keuntungannya adalah, mode ini tidak akan membebani client karena data yang diambil dan diproses pada client hanya sejumlah ukuran batas pagination yaitu secara default 10 data. Kelemahannya adalah setupnya yang lebih susah dari client side processing.

Persiapan dan Installasi

Tahap awal yang perlu dilakukan adalah dengan menginstall plugin yang diperlukan. Dari sisi blade view, anda harus mengincludekan assets DataTables yang dapat anda unduh dihalaman https://datatables.net/download/index atau dengan menggunakan asset yang berasal dari cdn.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.3/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.3/datatables.min.js"></script>

Sedangkan dari sisi package, anda perlu menginstall package tambahan yaitu Laravel Datatables

composer require yajra/laravel-datatables-oracle:"~9.0"

Setelah berhasil diinstall, sekarang saatnya kita mencoba mengimplementasikannya dalam project.

Basic Elloquent

Sekarang kita akan mencoba untuk mengintegrasikan ke project yang kita miliki. Tahap awal anda dapat lakukan dengan membuat Route yang nantinya akan diakses oleh server side processing secara Ajax.

Route::get('posts/datatables', [PostController::class, 'getDatatable'])->name('post.datatable');

Disini, saya membuat suatu route yang memiliki path /posts/datatables yang mengarah ke PostController@getDatatables. Selanjutnya mari kita edit controller tersebut. Pada controller kita inject Provider dari Laravel Datatables.

<?php

namespace App\Http\Controllers\admin;
use App\Http\Controllers\Controller;
use Yajra\DataTables\Facades\DataTables;

Setelah diinject, kita baru bisa menggunakan package ini pada controller. Buat function getDatatable kemudian masukan code berikut

public function datatable() {
    $data = Post::select(['title', 'post_id', 'slug', 'created_at']);
    return DataTables::of($data)->make(true);
}

Dari code diatas dapat dilihat, pertama saya membuat variable $data yang berisi syntak eloquent laravel untuk mengambil data dari model Post::select(['title', 'post_id', 'slug', 'created_at']);.

Selanjutnya, saya menggunakan package DataTables untuk memproses data tersebut menjadi bentuk yang diperlukan oleh jQuery Datatables. Output data dari fungsi tersebut adalah sebagai berikut:

{
  "draw": 1,
  "recordsTotal": 1,
  "recordsFiltered": 1,
  "data": [
    {
      "title": "Membuat Project Laravel",
      "post_id": 9,
      "slug": "membuat-project-laravel",
      "created_at": "2021-11-29T17:09:51.000000Z"
    }
  ],
  "queries": [
    {
      "query": "select count(*) as aggregate from `post`",
      "bindings": [],
      "time": 0.42
    },
    {
      "query": "select `title`, `post_id`, `slug`, `created_at` from `post` order by `title` asc limit 10 offset 0",
      "bindings": [],
      "time": 0.37
    }
  ],
  ...
  ...
}

Apabila controller telah selesai buat, saatnya menampilkan data tersebut pada jQuery Datatables. Buatkan satu view kemudian siapkan tabel tempat menampung data diatas.

<table class="table table-bordered" id="datatable">
    <thead>
        <tr>
            <th>Title</th>
            <th>Created At</th>
            <th>Post ID</th>
        </tr>
    </thead>
</table>

Dapat dilihat tabel tersebut memiliki 3 kolom, yaitu Title, Created At, dan Post ID. Kita akan mengisi kolom-kolom tersebut sesuai dengan namanya.

$('#datatable').DataTable({
  processing : true,
  serverSide : true,
	ajax       : "{{ route('post.datatable') }}",
	columns    :  [
		{data: 'title'},
		{data: 'created_at'},
		{data: 'post_id'},
	]
});

Code diatas merupakan option yang dipergunakan untuk menggunakan server side processing DataTables.

1. Option ajax, diisi dengan url datatables yang telah dipersiapkan
2. Option columns, diisi dengan mapping kolom-kolom dari eloquent sesuai urutan yang akan ditampilkan pada tabel

Join Query

Untuk eloquent yang memiliki query join didalamnya, anda perlu melakukan penyesuaian pada option Collumns. Misalkan query anda seperti ini:

public function datatable() {
    $data = Post::select(['posts.title', 'posts.created_at', 'users.name', 'posts.id'])
				->join('users', 'users.id', '=', 'posts.user_id');
    return DataTables::of($data)->make(true);
}

Maka option jQuery DataTables yang harus anda gunakan adalah sebagai berikut

$('#datatable').DataTable({
  processing : true,
  serverSide : true,
	ajax       : "{{ route('post.datatable') }}",
	columns    :  [
		{data: 'posts.title'},
		{data: 'posts.created_at'},
		{data: 'posts.post_id'},
		{data: 'users.name'},
	]
});

Awalnya apabila anda menggunakan 1 tabel, anda hanya perlu memasukan nama field pada option collumns. Namun apabila query anda melibatkan lebih dari 1 table, maka anda harus memasukan nama tabel sebelum menyertakan nama kolom. Apabila tidak, Laravel Datatables akan melakukan seleksi pada kolom ditabel utama yaitu table Post saat melakukan searching dan ordering data.

Custom Render

Selain menggunakan nama kolom pada option collumns, anda juga dapat melakukan custom render pada configurasi ini. Misalkan anda ingin agar pada kolom terakhir akan menampilkan tombol yang berupa html.

$('#datatable').DataTable({
  processing : true,
  serverSide : true,
	ajax       : "{{ route('post.datatable') }}",
	columns    :  [
		{data: 'posts.title'},
		{data: 'posts.created_at'},
-		~~{data: 'post_id'},~~
+		{
+			data: 'posts.post_id',
+			render : function(data, index, row) {
+				return `<a href="/post/show/${data}">Detail</a>`;
+			}
+		},
	]
});

Tips

Apabila anda mengakses route datatable secara langsung, anda akan dapat melihat query yang anda pergunakan saat data direturn oleh controller. Pada file .env atur APP_DEBUG menjadi false apabila anda ingin menghilangkan query tersebut agar project anda menjadi lebih aman.

Sumber

https://datatables.net/manual/data/

https://yajrabox.com/docs/laravel-datatables/master

Penutup

Sekian diatas merupakan basic penggunaan Laravel Datatables dan jQuery Datatables untuk project anda. Apabila anda ingin mempelajari lebih lanjut, anda dapat mengexplore kembali pada halaman official documentation dari kedua plugin diatas. Nah apabila anda memiliki kendala atau ada masukan, jangan sungkan untuk mengajukannya pada kolom komentar berikut. Terimakasi.