Yajra Datatables – Halo teman-teman semua, kali ini akan coba mempelajari tentang Datatables.. Khusus nya tentang Yajra Datatables Server Side..
Kita coba mulai dengan perkenalan terlebih dahulu yaa..
Apa itu Datatables?
Datatables adalah sebuah plugin yang dibuat dengan framework jquery, yang digunakan untuk menampilkan data dalam bentuk table..
Selain itu, dengan datatable juga sudah terdapat fitur pencarian nya, dan pagination nya, jadi kamu tidak perlu lagi repot-repot bikin modul untuk pencarian datanya, atau modul untuk pagination nya..
Jenis-jenis Datatables
Jadi untuk Datatables terdapat 2 jenis, yaitu:
- Datatables Client Side
- Datatables Server Side
Apa saja perbedaan dari kedua nya? Yuk kita bahas terlebih dahulu..
Apa itu Client Side?
Jadi datatables client side itu semua pemrosesan datanya dilakukan pada sisi client, atau dilakukan pada browser yang digunakan oleh client tersebut..
Pada client side, semua data akan ditarik terlebih dahulu, kemudian baru akan ditampilkan pada browser client dalam bentuk datatables..
Cara seperti ini tidak akan jadi masalah jika data yang ditarik hanya puluhan atau ratusan saja, tapi jika sudah ribuan atau bahkan jutaan, cara ini sangat tidak direkomendasikan, kenapa?? karena pasti akan memakan waktu sangat lama..
Sepengalaman mimin, jika kita maksa narik ribuan data dengan client side, terkadang browser kita akan nge freeze..
Solusi nya? untuk data yang berjumlah ribuan atau jutaan, bisa gunakan datatables server side..
Apa itu Server Side?
Datatables Server Side adalah salah satu cara terbaik saat ini untuk menampilkan data yang berjumlah besar, bahkan walaupun data nya jutaan..
Jika pada client side semua data akan ditarik terlebih dahulu baru kemudian ditampilkan / diolah pada browser client..
Maka pada server side, sistem hanya akan menarik data yang memang ditampilkan pada satu halaman saja..
Jadi walaupun ada sejuta data didalam database, tapi yang ditampilkan dalam 1 layar browser kita hanya 10 data, maka yang di tarik adalah 10 data tersebut..
Jika ingin mengganti nya dengan 10 data berikut nya, maka sistem hanya akan menarik ulang 10 data saja yang baru..
Jadi intinya, pada server side, data hanya akan di load per 1 halaman saja, tidak langsung semua data di load..
Di laravel sendiri sudah terdapat library yang menyediakan datatables server side, yaitu bernama Yajra Datatables..
Apa itu Yajra Datatables?
Seperti yang sudah di bahas sebelum nya, yajra datatables adalah sebuah library laravel untuk mempermudah kita dalam menggunakan datatables server side..
Untuk lebih mudah memahami nya, langsung saja kita coba praktekan penggunaan nya..
Persiapan
Ada beberapa hal yang perlu kita persiapkan terlebih dahulu..
Instalasi Laravel
Untuk versi laravel yang digunakan disini adalah versi 8..
Untuk cara instalasi nya, bisa kalian kunjungi halaman Official Website Laravel nya Disini..
Disini saya berasumsi bahwa teman-teman sudah berhasil menginstall nyaa, jika kalian jalankan perintah “php artisan server“, kemudian kalian akses di browser dengan url berikut:
127.0.0.1:8000/
Maka seharusnya akan tampil seperti ini:
Persiapan Database nya
Karena cara belajar kita adalah by studi kasus, maka kita butuh database untuk dijadikan bahan praktek..
Disini kita akan menggunakan 2 table, dimana table tersebut akan saling berelasi satu sama lain..
Yang pertama yaitu adalah table kelas..
Table ini berisi data-data kelas dengan struktur seperti berikut..
Kemudian untuk table yang kedua yaitu table siswa, dimana table ini memiliki struktur seperti berikut:
Coba kita perhatikan struktur table siswa diatas, terdapat kolom kelas_id yang mana nanti kolom ini akan kita relasikan kedalam table kelas berdasarkan id kelas nyaa..
Kemudian terdapat kolom status, dimana pada kolom tersebut kita memberikan sebuah nilai default 1..
Nanti akan kita buat kondisi, jika siswa tersebut memiliki status 1 maka tanda nya adalah aktif, tapi jika selain 1 maka tandanya adalah tidak aktif..
Sekarang coba isi table kelas dengan dummy data terlebih dahulu, seperti berikut..
Kemudian isi table siswa dengan dummy data juga seperti berikut:
Diatas saya sudah mengisi table siswa dengan dummy data sebanyak 10.000 data, banyak kan??
Datanya pun tidak asal-asalan, tapi seperti data asli, mau tau cara nya?? Silahkan kalian pelajari Seeding dan Faker pada Laravel..
Membuat Model untuk mewakili Table nya
Kedepan nya, kita akan melakukan pemrosesan query dengan menggunakan Eloquent, oleh karena nya kita butuh Model untuk mewakili tiap masing-masing table..
Pertama kita buat dulu Model M_kelas nya, jalankan perintah berikut:
php artisan make:model M_kelas
Sekarang coba kita buka file model nya, dan modifikasi sedikit seperti berikut:
../app/Models/M_kelas.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class M_kelas extends Model
{
use HasFactory;
protected $table = 'kelas';
}
Perhatikan pada baris 11, kita menambahkan sebuah property table untuk menunjukkan bahwa model ini mewakili table ‘kelas‘..
Kemudian buat 1 lagi model M_siswa, jalankan perintah berikut:
php artisan make:model M_siswa
../app/Models/M_siswa.php
Setelah terbentuk, sekarang moifikasi sedikit seperti berikut:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class M_siswa extends Model
{
use HasFactory;
protected $table = 'siswa';
}
Masih sama seperti sebelum nya, pada baris ke 11 kita menambahkan sebuah property table untuk menandakan bahwa model ini mewakili table siswa..
Konfigurasi Database
Jangan sampe lupa juga untuk konfigurasi database nya di file .env..
Silahkan kalian sesuaikan sendiri untuk username, password, dan nama database nya sesuai dengan komputer masing-masing..
Download Database
Jika kamu merasa malas untuk membuat table siswa secara manual beserta isinya, kamu bisa langsung download database nya disini..
Memahami Dasar-dasar Jquery
Dalam tutorial kali ini, saya mengharapkan teman-teman untuk bisa memahami jquery terlebih dahulu, minimal dasar-dasar nya juga gak papa..
Install Library Yajra Datatables via Composer
Langkah terakhir sebelum kita memulai praktek nya yaitu melakukan instalasi package Yajra Datatables nyaa..
Untuk cara instalasi nya, kita menggunakan composer, jalankan perintah berikut di CMD atau Terminal kalian:
composer require yajra/laravel-datatables-oracle
Tunggu beberapa saat hingga proses instalasi nya selesai seperti pada gambar diatas..
Kemudian kita perlu menambahkan Datatables Service Provider dan Facade pada file “../config/app.php“..
Dibagian providers tambah sebuah service seperti berikut:
Yajra\Datatables\DatatablesServiceProvider::class,
Sekarang dibagian aliases, tambahkan class seperti berikut:
'Datatables' => Yajra\Datatables\Facades\Datatables::class,
Langkah terakhir, kita publish configuration file nya, jalankan perintah seperti berikut:
php artisan vendor:publish
Jika muncul seperti ini:
Kita tekan 0 saja, kemudian tekan Enter..
Mulai menampilkan data dengan Yajra Datatables
Sekarang kita akan mulai menampilkan data nyaa..
Baca juga : Panduan Lengkap Belajar API Laravel + Studi Kasus
Data yang akan ditampilkan yaitu data siswa yang memiliki 10 ribu rows..
Pertama kita buat Siswa_controller nya terlebih dahulu, jalankan perintah berikut:
php artisan make:controller Siswa_controller
Kemudian buat route baru didalam file web.php
../routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Siswa_controller;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('/siswa/list',[Siswa_controller::class,'index']);
Perhatikan pada file web.php diatas..
Pada baris ke 4, kita memanggil file Siswa_controller nya..
Kemudian pada baris ke 21, kita membuat sebuah route dengan method get, url nya yaitu “/siswa/list“, menggunakan Siswa_controller yang mengarah ke function index..
Kita buka file Siswa_controller nya, kemudian tambahkan sebuah function baru dengan nama index seperti berikut:
../app/Http/Controllers/Siswa_controller.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class Siswa_controller extends Controller
{
//
public function index(){
return view('siswa.index');
}
}
Pada function index diatas, tidak memiliki proses apapun, kita hanya langsung mengarahkan nya ke view “siswa.index“..
Oleh karena nya, sekarang kita langsung saja buat view nya, dan isi seperti berikut:
../resources/views/siswa/index.blade.php
<!DOCTYPE html>
<html>
<head>
<title>sangcahaya.id</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>SANGCAHAYA.ID</h1>
<div class="table-responsive">
<table class="table table-hover" id="table-siswa">
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Alamat</th>
<th>Kelas</th>
<th>Status</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
</body>
</html>
Ada beberapa hal yang perlu kita perhatikan pada view diatas..
Pertama pada baris ke 6, kita memanggil asset bootstrap css nya via cdn..
Pada baris ke 8, kita memanggil asset css jquery datatables nya via cdn..
Kemudian pada baris ke 17, kita mendefine sebuah table dengan beberapa header, yaitu ID, Nama, Alamat, Kelas dan status..
Dan perlu di perhatikan, di table tersebut kita mendefine atribut baru yaitu atribut id dengan nilai “table-siswa“..
Nanti atribut tersebut lah yang akan dijadikan penghubung terhadap yajra nya..
Tapi table tersebut hanya memiliki header saja, untuk body nya nanti akan kita tampilkan dengan yajra, jadi kita tidak perlu mendefine body nya lagi didalam struktur table tersebut..
Pada baris ke 34 kita memanggil asset jquery js..
Baris ke 36 kita memanggil asset bootstrap js..
Dan terakhir pada baris ke 38 kita memanggil jquery datatable js via cdn..
Asset-asset di atas wajib selalu kalian bawa di setiap view..
Lantas sekarang bagaimana untuk pemrosesan data via yajra nya?
Kalian buat route baru lagi di file web.php seperti berikut:
....
Route::get('/siswa/list/yajra',[Siswa_controller::class,'yajra']);
Route diatas digunakan untuk melakukan pemrosesan data via yajra, semua query nya akan dilakukan pada function yajra didalam Siswa_controller..
Sekarang didalam Siswa_controller, kalian buat function yajra seperti berikut:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\M_siswa;
use DataTables;
class Siswa_controller extends Controller
{
//
public function index(){
return view('siswa.index');
}
public function yajra(){
$siswas = M_siswa::select(['id','nama','alamat','kelas_id','status']);
return DataTables::of($siswas)->make();
}
}
Tolong perhatikan script diatas, pada baris ke 7, kita panggil dulu model M_siswa nya..
Kemudian di baris ke 8 kita memanggil class DataTables nya..
Nah kemudian dibaris ke 17, kita buat function baru dengan nama yajra..
Didalam nya terdapat variable siswas yang isi nya adalah query untuk menselect kolom-kolom yang akan kita tarik dari table siswa nya.. tapi tanpa property get()..
.... $siswas = M_siswa::select(['id','nama','alamat','kelas_id','status']); ....
Karena kita akan mereturn nya dalam bentuk DataTables..
.... return DataTables::of($siswas)->make(); ....
Nah sekarang kita modifikasi kembali view nyaa, dibagian bawah kalian tambahkan script jquery seperti berikut:
....
<script type="text/javascript">
$(document).ready(function(){
$('#table-siswa').DataTable({
processing: true,
serverSide: true,
ajax: "{{ url('/siswa/list/yajra') }}",
columns: [
{data: 'id', name: 'id'},
{data: 'nama', name: 'nama'},
{data: 'alamat', name: 'alamat'},
{data: 'kelas_id', name: 'kelas_id'},
{data: 'status', name: 'status'},
]
});
})
</script>
....
Disinilah peran terhadap pehamaman basic jquery sangat di perlukan..
Kalo lihat perhatikan gambar di atas, baris ke 43 digunakan untuk memanggil trigger table nya berdasarkan atribut id nya..
Kemudian dibaris ke 46 nya kita isi dengan url yang mengarah ke pemrosesan data yajra nya yaitu “../siswa/list/yajra“..
Baris ke 48 sampai ke 52 adalah untuk mendefine isi dari masing-masing kolom header table nya, ibarat nya seperti body table nya lah..
Sekarang kalo kita akses url “http://127.0.0.1:8000/siswa/list“, maka seharusnya akan tampil seperti berikut:
Kita bisa dengan mudah dan lancar mengakses data siswa yang total keseluruhan data nya sebanyak 10 ribu row..
Ditambah lagi sudah terdapat kolom untuk pencarian data di pojok kanan atas, serta kita juga dapat menentukan berapa jumlah data yang ingin ditampilkan dalam 1 halaman, tinggal kita pilih di pojok kiri atas..
Luar biasa sekali kan yajra datatables?? Ingin mempelajari nya lebih lanjut?? silahkan bookmark dulu halaman ini..
Cara Mengedit Kolom pada Yajra
Pada halaman list siswa, kita bisa melihat kolom status masih berbentuk angka 1 atau 2..
Nah sekarang akan kita kasih kondisi, jika status nya 1 akan kita beri nilai “Aktif“, tapi jika 2 akan kita beri nilai “Tidak Aktif“..
Bagaimana caranya?? Gampang..
Kita buka kembali Siswa_controller nya, pada function yajra modifikasi seperti berikut:
....
public function yajra(){
$siswas = M_siswa::select(['id','nama','alamat','kelas_id','status']);
return DataTables::of($siswas)->editColumn('status',function($data_siswa){
if($data_siswa->status == 1){
return 'Aktif';
}elseif($data_siswa->status == 2){
return 'Tidak Aktif';
}
})->make();
}
....
Diatas, pada baris ke 5 kita menambahkan sebuah property baru yaitu editColumn, dimana pada parameter pertama kita tentukan kolom mana yang akan kita edit, karena kita akan mengedit kolom “status”, maka kita isi “status”
editColumn('status',function($data_siswa){
Kemudian di parameter kedua kita buka function baru dengan menginisialisai sebuah variable dengan nama $data_siswa.. Variable tersebut digunakan untuk nge get object data siswa nya..
Kemudian didalam function tersebut kita bisa melihat ada kondisi yang dijalankan, jika data status bernilai sama dengan 1 maka akan mereturn string “Aktif“..
Tapi jika 2, maka akan mereturn string “Tidak Aktif“..
....
if($data_siswa->status == 1){
return 'Aktif';
}elseif($data_siswa->status == 2){
return 'Tidak Aktif';
}
....
Sekarang kalo kalian buka lagi halaman list siswa nya, maka kolom status akan berubah menjadi seperti ini:
Render HTML Pada Yajra
Dikolom yajra, tadi sudah kita ubah dari angka menjadi keterangan aktif atau tidak aktif..
Tapi rasanya kurang menarik jika hanya text seperti itu saja, kita akan coba percantik dengan menggunakan button class bootstrap, kurang lebih seperti ini:
Di Siswa_controller, pada function yajra, kita modifikasi menjadi seperti berikut:
....
public function yajra(){
$siswas = M_siswa::select(['id','nama','alamat','kelas_id','status']);
return DataTables::of($siswas)->editColumn('status',function($data_siswa){
if($data_siswa->status == 1){
return '<button class="btn btn-success btn-xs">Aktif</button>';
}elseif($data_siswa->status == 2){
return '<button class="btn btn-warning btn-xs">Tidak Aktif</button>';
}
})->make(true);
....
Kita bisa lihat pada baris ke 7 dan 9, kita me return Aktif atau Tidak Aktif nya dengan membungkus nya menggunakan button class bootstrap..
Kalo kita refresh lagi halaman list siswa nya, akan menjadi seperti ini:
Nah sekarang yang jadi pertanyaan nya, gimana cara nya agar kode html tersebut dapat ter-render atau terbaca..
Kita bisa gunakan perintah rawColumns([])..
Cara nya adalah seperti berikut:
....
public function yajra(){
$siswas = M_siswa::select(['id','nama','alamat','kelas_id','status']);
return DataTables::of($siswas)->editColumn('status',function($data_siswa){
if($data_siswa->status == 1){
return '<button class="btn btn-success btn-xs">Aktif</button>';
}elseif($data_siswa->status == 2){
return '<button class="btn btn-warning btn-xs">Tidak Aktif</button>';
}
})->rawColumns(['status'])->make(true);
}
....
Didalam rawColumns(), kita tinggal definisikan kolom-kolom apa saja yang akan di render sebagai html, diatas kita mengisi “status” karena kolom yang ingin kita render adalah kolom status..
Kalo kita buka lagi halaman list siswa nya, akan menjadi seperti ini:
Kita bisa lihat pada kolom status, sudah terender dan terlihat lebih menarik bukan?
Cara menambahkan Kolom pada Yajra
Kalo tadi barusan adalah cara edit kolom, sekarang kita ingin menambahkan sebuah kolom baru..
Baca juga : 27 Trik Belajar Eloquent di Laravel
Misalkan kita ingin menambahkan kolom action yang berisi button edit dan juga button hapus.. bagaimana caranya?
Gampang, kita bisa gunakan method addColumn(), cara penggunaan nya adalah seperti berikut:
....
public function yajra(){
$siswas = M_siswa::select(['id','nama','alamat','kelas_id','status']);
return DataTables::of($siswas)->editColumn('status',function($data_siswa){
if($data_siswa->status == 1){
return '<button class="btn btn-success btn-xs">Aktif</button>';
}elseif($data_siswa->status == 2){
return '<button class="btn btn-warning btn-xs">Tidak Aktif</button>';
}
})->addColumn('action',function($data){
$url_edit = url('siswa/edit/'.$data->id);
$url_hapus = url('siswa/hapus/'.$data->id);
$button = '<a href="'.$url_edit.'" class="btn btn-primary">Edit</a>';
$button .= '<a href="'.$url_hapus.'" class="btn btn-danger">Hapus</a>';
return $button;
})->rawColumns(['status','action'])->make(true);
}
....
Diatas, kita membuat method baru yaitu addColumn(), disana terdapat parameter pertama yang mana kita isi dengan nama kolom nya..
addColumn('action',function($data){
Kemudian didalam nya kita isi button edit dan juga button hapus..
Kedua button tersebut dibungkus dengan struktur HTML, oleh karena nya, kita perlu menambahkan nya juga kedalam method rawColumns()..
->rawColumns(['status','action'])
Sekarang kita modifikasi bagian view nyaa..
../resources/views/siswa/index.blade.php
Pertama, pada struktur table HTML nya kita tambahkan sebuah kolom header baru dengan nama “Action” seperti berikut:
Kemudian di jquery yajra nya kita tambahkan juga columns baru sesuai dengan yang sudah kita define pada controller nya seperti berikut:
Sekarang coba kalian refresh kembali halaman list siswa nya, pastikan juga sudah terdapat kolom action di list table siswa nya seperti berikut:
Custom jumlah data per 1 halaman
Seperti yang sudah kita ketahui, dengan datatables secara default kita dapat menentukan berapa jumlah data yang akan ditampilkan dalam 1 halaman, tapi angka nya hanya sebatas yang sudah ditentukan saja..
Hanya 10, 25, 50, dan 100 saja..
Gimana kalo misalkan kita ingin menampilkan 200 data, 500 data, 1000 data, 10.000 data, atau bahkan seluruh data dalam 1 halaman?
Oleh karena nya kita perlu mengcustom nya, cara nya seperti apa? Gampang, kalian bisa ikuti cara seperti berikut..
Buka kembali file view nya, dan modifikasi seperti berikut:
....
$('#table-siswa').DataTable({
"lengthMenu": [
[ 10, 25, 50, 100, 1000, -1 ],
[ '10 rows', '25 rows', '50 rows', '100 rows', '1000 rows', 'All' ]
],
processing: true,
serverSide: true,
ajax: "{{ url('/siswa/list/yajra') }}",
columns: [
{data: 'action', name: 'action'},
{data: 'id', name: 'id'},
{data: 'nama', name: 'nama'},
{data: 'alamat', name: 'alamat'},
{data: 'kelas_id', name: 'kelas_id'},
{data: 'status', name: 'status'},
]
});
....
Perhatikan script diatas, untuk membuat custom jumlah data nya, kita bisa gunakan perintah “lengthMenu” seperti yang kita lakukan diatas pada baris ke 3..
Kemudian didalam lengthMenu terdapat 2 parameter Array, array pertama digunakan untuk menentukan berapa jumlah data dalam 1 halaman..
Parameter Array ke 2 digunakan untuk tampilan di datatables nya.. istilah nya parameter ke 2 ini adalah perwakilan dari parameter ke 1..
Kita bisa tentukan sendiri angka-angka nya, dan parameter array ke 1 dan ke 2 harus sama dan seimbang yaa, karena saling terkait..
Dan kalo kita ingin menampilkan semua data, di parameter pertama kita bisa isi angka -1, dan di parameter kedua nya bisa kita isi dengan kalimat “All” atau “Tampilkan semua”..
Sekarang coba kita refresh kembali halaman list siswa nya, maka seharusnya akan menjadi seperti berikut:
Cara Export ke Pdf / Excel / Csv / Lainnya
Salah satu kelebihan dari Datatables yaitu kita bisa langsung export data nya ke berbagai macam format..
Baik itu berupa excel, csv, pdf, atau Copy to Clipboard..
Untuk bisa menggunakan nya, kita butuh beberapa tambahan assets yaitu datatables button css dan juga js nya..
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css"> <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script> <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js "></script> <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
Kita tambahkan assets di atas kedalam view nya, silahkan dibuka kembali file index.blade.php nya
../resources/views/siswa/index.blade.php
....
<head>
<title>sangcahaya.id</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">
</head>
....
Pada script diatas, didalam element head, kita menambahkan 1 asset css baru seperti pada baris ke 9..
Kemudian dibagian bawah file, kita juga menambahkan asset js dari datatables button nya seperti berikut:
....
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js "></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
....
Kemudin pada action jquery yajra nya, kalian juga perlu menambahkan beberapa property seperti berikut:
....
$('#table-siswa').DataTable({
dom: 'lBfrtip',
buttons: [
'copy', 'excel', 'pdf', 'csv', 'print'
],
"lengthMenu": [
[ 10, 25, 50, 100, 1000, -1 ],
[ '10 rows', '25 rows', '50 rows', '100 rows', '1000 rows', 'All' ]
],
processing: true,
serverSide: true,
ajax: "{{ url('/siswa/list/yajra') }}",
columns: [
{data: 'action', name: 'action'},
{data: 'id', name: 'id'},
{data: 'nama', name: 'nama'},
{data: 'alamat', name: 'alamat'},
{data: 'kelas_id', name: 'kelas_id'},
{data: 'status', name: 'status'},
]
});
....
Pada bagian property button, disana terdapat beberapa element, ada pdf, csv, excel, print, dan copy..
Nah kalian bisa menentukan sendiri urutan nya, dan kalo misalkan kalian hanya ingin memunculkan button excel dan pdf saja, kalian cukup mengisi nya dengan excel dan pdf..
Sekarang kalo kita refresh halaman list siswa nya, pastikan button untuk export nya sudah muncul seperti pada gambar berikut:
Cara Memanggil Relasi Eloquent pada Yajra
Nah, kalo kita perhatikan lagi table siswa nya, tepat nya pada kolom kelas, disana yang tampil adalah ID dari kelas nya..
Sekarang yang jadi pertanyaan nya, bagaimana cara nya kalo kita ingin menampilkan nama kelas nya?
Pertama kita harus buat relasi terlebih dahulu antara Model Siswa dengan Model kelas nyaa..
Jenis relasi yang akan kita gunakan yaitu belongsTo, kalian bisa pelajari lebih lanjut di halaman official laravel nya disini..
Kita buka dulu file Model Siswa nyaa..
../app/Models/M_siswa.php
Kalian tambahkan sebuah method baru seperti berikut:
....
public function kelas(){
return $this->belongsTo('App\Models\M_kelas','kelas_id','id');
}
....
Didalam class model M_siswa, kita membuat sebuah method baru dengan nama kelas..
Didalam method tersebut, terdapat sebuah relasi belongsTo terhadap model M_kelas yang mana yang menjadi relasi nya yaitu kelas_id yang ada didalam table siswa, berelasi dengan field id yang ada didalam table..
Nah setelah relasi nya dibuat, sekarang kita bawa relasi tersebut di controller nya..
Kita membawa nya dengan perintah with() seperti berikut:
....
$siswas = M_siswa::select(['id','nama','alamat','kelas_id','status'])->with(['kelas']);
return DataTables::of($siswas)->editColumn('status',function($data_siswa){
if($data_siswa->status == 1){
return '<button class="btn btn-success btn-xs">Aktif</button>';
}elseif($data_siswa->status == 2){
return '<button class="btn btn-warning btn-xs">Tidak Aktif</button>';
}
})->addColumn('action',function($data){
$url_edit = url('siswa/edit/'.$data->id);
$url_hapus = url('siswa/hapus/'.$data->id);
$button = '<a href="'.$url_edit.'" class="btn btn-primary">Edit</a>';
$button .= '<a href="'.$url_hapus.'" class="btn btn-danger">Hapus</a>';
return $button;
})->rawColumns(['status','action'])->make(true);
....
Perintah with digunakan untuk membawa relasi yang ada pada model tersebut..
Nah sekarang di view nya, kita tinggal memanggil nya seperti ini:
Yang sebelumnya kita memanggil kelas_id nya, sekarang kita panggil relasi nya, kemudian panggil object nya..
....
{data: 'kelas.nama', name: 'kelas.nama'},
....
Sekarang kalo kita refresh lagi halaman list siswa nya, maka sekarang di kolom kelas yang muncul adalah nama kelas nya, bukan lagi si id kelas nya..
Membuat Column Search
Seperti yang sudah kita ketahui bersama, pada Datatables sudah terdapat kolom search dibagian pojok kanan atas..
Kalian bisa search apa saja disana untuk semua kolom..
Nah sekarang kita akan membuat kolom search lagi, tapi untuk masing-masing kolom, nanti hasilnya kurang lebih akan jadi seperti ini:
Caranya gampang, kamu tinggal edit di bagian view nya aja seperti berikut:
../resources/views/siswa/index.blade.php
Pada bagian struktur table, kalian tambahkan element “tfoot” didalam nya seperti berikut:
....
<table class="table table-hover" id="table-siswa">
<thead>
<tr>
<th>Action</th>
<th>ID</th>
<th>Nama</th>
<th>Alamat</th>
<th>Kelas</th>
<th>Status</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
....
Kemudian pada bagian jquery yajra nya, kalian tambahkan lagi sebuah method seperti berikut:
....
$('#table-siswa').DataTable({
dom: 'lBfrtip',
buttons: [
'copy', 'excel', 'pdf', 'csv', 'print'
],
"lengthMenu": [
[ 10, 25, 50, 100, 1000, -1 ],
[ '10 rows', '25 rows', '50 rows', '100 rows', '1000 rows', 'All' ]
],
processing: true,
serverSide: true,
ajax: "{{ url('/siswa/list/yajra') }}",
columns: [
{data: 'action', name: 'action',searchable:false},
{data: 'id', name: 'id'},
{data: 'nama', name: 'nama'},
{data: 'alamat', name: 'alamat'},
{data: 'kelas.nama', name: 'kelas.nama'},
{data: 'status', name: 'status'},
],
initComplete: function () {
this.api().columns().every(function () {
var column = this;
var input = document.createElement("input");
$(input).appendTo($(column.footer()).empty())
.on('change', function () {
column.search($(this).val(), false, false, true).draw();
});
});
}
});
....
Nah sekarang coba kalian refresh lagi halaman list siswa nya, pasti nanti akan muncul sebuah column search seperti berikut:
Untuk cara penggunaan nya, kalian ketika aja di inputan nya pada kolom yang ingin kalian search, trus coba tekan enter.. Maka nanti otomatis datanya akan ke filter..
Jika saat filter kelas terdapat error seperti ini:
Error diatas muncul karena terdapat field ID yang ambigu, kenapa ambigu? Karena sebelumnya kita membawa relasi “kelas” kedalam query nya dengan perintah “with”..
Maka kita perlu memperjelas lagi data-data yang di select itu milik table siapa, seperti berikut ini:
public function yajra(){
$siswas = M_siswa::select([
'siswa.id',
'siswa.nama',
'siswa.alamat',
'siswa.kelas_id',
'siswa.status'
])->with(['kelas']);
return DataTables::of($siswas)->editColumn('status',function($data_siswa){
if($data_siswa->status == 1){
return '<button class="btn btn-success btn-xs">Aktif</button>';
}elseif($data_siswa->status == 2){
return '<button class="btn btn-warning btn-xs">Tidak Aktif</button>';
}
})->addColumn('action',function($data){
$url_edit = url('siswa/edit/'.$data->id);
$url_hapus = url('siswa/hapus/'.$data->id);
$button = '<a href="'.$url_edit.'" class="btn btn-primary">Edit</a>';
$button .= '<a href="'.$url_hapus.'" class="btn btn-danger">Hapus</a>';
return $button;
})->rawColumns(['status','action'])->make(true);
}
Cara membuat No Urut
Sekarang kita akan coba buat no urut pada table kita..
Jadi dengan cara ini, kita bisa tau data tersebut berada di no urut berapa..
Kita modifikasi terlebih dahulu file Controller nya, ubah seperti berikut:
../app/Http/Controllers/Siswa_controller.php
public function yajra(Request $request){
\DB::statement(\DB::raw('set @rownum=0'));
$siswas = M_siswa::select([
\DB::raw('@rownum := @rownum + 1 AS rownum'),
'siswa.id',
'siswa.nama',
'siswa.alamat',
'siswa.kelas_id',
'siswa.status'
])->with(['kelas']);
$datatables = DataTables::of($siswas)->editColumn('status',function($data_siswa){
if($data_siswa->status == 1){
return '<button class="btn btn-success btn-xs">Aktif</button>';
}elseif($data_siswa->status == 2){
return '<button class="btn btn-warning btn-xs">Tidak Aktif</button>';
}
})->addColumn('action',function($data){
$url_edit = url('siswa/edit/'.$data->id);
$url_hapus = url('siswa/hapus/'.$data->id);
$button = '<a href="'.$url_edit.'" class="btn btn-primary">Edit</a>';
$button .= '<a href="'.$url_hapus.'" class="btn btn-danger">Hapus</a>';
return $button;
})->rawColumns(['status','action']);
if ($keyword = $request->get('search')['value']) {
$datatables->filterColumn('rownum', 'whereRaw', '@rownum + 1 like ?', ["%{$keyword}%"]);
}
return $datatables->make(true);
}
Diatas, pada function yajra nya, kita ada tambahan parameter Request $request..
Dibaris ke 2 kita ada tambahan script:
\DB::statement(\DB::raw('set @rownum=0'));
Dibaris ke 4 ada tambahan script:
\DB::raw('@rownum := @rownum + 1 AS rownum'),
Dibaris ke 28 terdapat tambahan kondisi if
if ($keyword = $request->get('search')['value']) {
$datatables->filterColumn('rownum', 'whereRaw', '@rownum + 1 like ?', ["%{$keyword}%"]);
}
Kurang lebih yang mengalami perubahan adalah seperti berikut:
Kemudian di view nya, kita tinggal tambahkan aja header baru di struktur table nyaa..
Dan juga tambahkan kolom di jquery yajra nya seperti berikut:
....
<thead>
<tr>
<th>Action</th>
<th>No Urut</th>
<th>ID</th>
<th>Nama</th>
<th>Alamat</th>
<th>Kelas</th>
<th>Status</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
....
Pada element thead, kita menambahkan kolom baru dengan nama “No Urut” setelah action..
Kemudian di bagian tfoot nya kita juga harus menambahkan td baru..
Dan di jquery yajra nya tambahkan juga seperti ini:
....
columns: [
{data: 'action', name: 'action',searchable:false},
{data: 'rownum', name: 'rownum'},
{data: 'id', name: 'id'},
{data: 'nama', name: 'nama'},
{data: 'alamat', name: 'alamat'},
{data: 'kelas.nama', name: 'kelas.nama'},
{data: 'status', name: 'status'},
],
....
Diatas kita menambahkan data rownum setelah kolom action..
Sekarang coba refresh kembali halaman list siswa nya, seharus nya akan muncul kolom baru dengan nama “No Urut”..
Sebagai catatan, no urut tersebut adalah untuk per 1 halaman, jika kamu berpindah halaman, maka no urut nya pun akan dimulai lagi dari nomor 1..
Row Details
Sekarang kita akan membuat sebuah kolom lagi, tapi posisi kolom ini berbeda dari yang sebelumnya..
Kita akan meletakkan kolom ini didalam sebuah row atau didalam sebuah baris, jadi nanti akan ada sebuah button yang dapat membuka/menutup kolom tersebut..
Kurang lebih gambaran nya adalah seperti berikut:
Untuk bisa membuat seperti itu, kita melakukan perubahan pada view nya, seperti ini:
Pertama kita tambahkan dulu sebuah kolom baru dibagian thead dan tfoot seperti berikut:
Kemudian modifikasi juga dibagian javascript nya seperti berikut:
....
<script src="https://twitter.github.io/typeahead.js/js/handlebars.js"></script>
<script id="details-template" type="text/x-handlebars-template">
<table class="table">
<tr>
<td>Nama:</td>
<td>@{{nama}}</td>
</tr>
</table>
</script>
<script type="text/javascript">
$(document).ready(function(){
var template = Handlebars.compile($("#details-template").html());
var table = $('#table-siswa').DataTable({
dom: 'lBfrtip',
buttons: [
'copy', 'excel', 'pdf', 'csv', 'print'
],
"lengthMenu": [
[ 10, 25, 50, 100, 1000, -1 ],
[ '10 rows', '25 rows', '50 rows', '100 rows', '1000 rows', 'All' ]
],
processing: true,
serverSide: true,
ajax: "{{ url('/siswa/list/yajra') }}",
columns: [
{
"className": 'details-control',
"orderable": false,
"searchable": false,
"data": null,
"defaultContent": '<button class="btn btn-xs btn-success">Detail</button>'
},
{data: 'action', name: 'action',searchable:false},
{data: 'rownum', name: 'rownum'},
{data: 'id', name: 'id'},
{data: 'nama', name: 'nama'},
{data: 'alamat', name: 'alamat'},
{data: 'kelas.nama', name: 'kelas.nama'},
{data: 'status', name: 'status'},
],
initComplete: function () {
this.api().columns().every(function () {
var column = this;
var input = document.createElement("input");
$(input).appendTo($(column.footer()).empty())
.on('change', function () {
column.search($(this).val(), false, false, true).draw();
});
});
}
});
// Add event listener for opening and closing details
$('#table-siswa tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( template(row.data()) ).show();
tr.addClass('shown');
}
});
})
</script>
....
Coba perhatikan script di atas yah..
Pada baris ke 2 kita menambahkan sebuah assets baru, yaitu assets handlebars, asset ini digunakan untuk membuat table details nyaa..
<script src="https://twitter.github.io/typeahead.js/js/handlebars.js"></script>
Kemudian pada baris ke 4 sampai 11 adalah struktur table details nyaa..
<script id="details-template" type="text/x-handlebars-template">
<table class="table">
<tr>
<td>Nama:</td>
<td>@{{nama}}</td>
</tr>
</table>
</script>
Untuk cara pemanggilan kolomnya adalah dengan menggunkan “@{{nama}}“..
Dibaris ke 16 kita inisialisai variabel template..
var template = Handlebars.compile($("#details-template").html());
Dan di baris ke 18, pemanggilan table siswa nya kita masukkan kedalam sebuah variable bernama table..
Kemudian pada baris ke 31 sampai ke 37, kita mendefine sebuah kolom baru..
Dan dibaris ke 58 sampai ke 73, kita menambahkan sebuah listener seperti berikut:
Sekarang coba kalian refresh halaman list siswa nya, pastikan muncul seperti berikut:
Kalo kalian klik button detail nya, maka nanti akan muncul detail table nyaa..
Akhir Kata
Terima kasih telah mengikuti seri tutorial ini, semoga bermanfaat..
Support Us
Jika artikel ini bermanfaat untuk kamu, membantu menyelesaikan masalah yang sedang kamu hadapi, kamu juga bisa dukung kami dengan mengunjungi halaman berikut: https://saweria.co/sangcahayaid
Terima kasih..
[…] Baca juga : Panduan Lengkap Yajra Datatables Server Side dengan Studi Kasus […]
[…] Untuk lebih jelas nya, serta bagaimana cara penggunaan nya, bisa kamu buka postingan saya sebelum nya yang membahas lengkap tentang Yajra Datatables Disini.. […]
[…] Jadi mirip seperti datatables, sebelumnya kita juga sudah pernah membahas tentang Yajra datatables server side, bagi kamu yang belum membacanya, silahkan dibuka saja Pandungan Lengkap yajra datatables server side + studi kasus.. […]