server side datatables menggunakan yajra 1 pada laravel admin lte

March 26,
2020
Server Side Datatables Menggunakan Yajra #1 Pada
Laravel AdminLte
adinata.id/laravel/server-side-datatables-menggunakan-yajra-1-pada-laravel-adminlte/
Pada Artikel sebelumnya kita sudah membahas bagaimana integrasi laravel dengan
jquery datatables bagi anda yang belum membaca nya silahkan baca disini.
Dimana untuk data yang jumlah recordnya kecil maka tidak ada masalah menggunakan
jquery datatatables client side namun jika anda mengelola data dalam jumlah banyak
seperti 10.000 record atau lebih maka meload data dengan client side bukanlah
merupakan sebuah solusi yang tepat maka di perlukan solusi untuk meload data server
side.
Solusi Server Side Datatables
Ya untuk anda yang meload data dalam jumlah besar solusi nya adalah serverside
datatables pada laravel kita akan menggunakan package yajra datatables dokumentasi
yajra bisa anda baca disini.
Implementasi Yajra Datatables Pada Laravel
berikut langkah demi langkah integrasi Yajra Datatables Pada Laravel :
Pada Terminal / command prompt ketikkan perintah sbb :
composer require yajra/laravel-datatables-oracle:"~9.0"
Berikut proses updata composer dan instalasi Yajra datatables
1/8

proses instalasi package yajra datatables
setelah proses diatas selesai langkah selanjut nya buka file config/app.php sbb :
Dan Lakukan Register yajra pada provider and
facade sbb :
'providers' => [
...,
YajraDataTablesDataTablesServiceProvider::class,
]
'aliases' => [
...,
'DataTables' =>
YajraDataTablesFacadesDataTables::class,
]
setelah itu lakukan configuration dengan cara ketik
command sbb :
php artisan vendor:publish --provider="YajraDataTablesDataTablesServiceProvider"
berikut prosesnya :
proses publish configuration
setelah proses diatas anda lakukan maka kita sudah berhasil melakukan instalasi Yajra
Datatables pada aplikasi kita selanjutnya kita akan integrasikan ke template AdminLTE.
Integrasi Yajra Datatables Dengan Template AdminLTE
pertama kita buat file views untuk datatablesnya dan kita beri nama
datatables.blade.php sbb :
2/8

dan untuk code nya isi sbb :
@extends('layouts.app2')
@section('styles')

<link rel="stylesheet" href="
{{url('AdminLTE/plugins/datatables-
bs4/css/dataTables.bootstrap4.css') }}">
@endsection
@section('content')

<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Halaman
Product</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a
href="#">Dashboard</a></li>
<li class="breadcrumb-item active">Products
</li>
</ol>
</div>
</div>
</div>
</div>

<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Daftar
Produk</h3>
</div>
<div class="card-body">
<div class="card-body table-responsive p-
0">
<table class="table table-hover text-
nowrap" id="table-product">
<thead>
<tr>
<th> Nama Produk </th>
<th> Satuan </th>
<th> Harga Beli </th>
<th> Harga Jual </th>
</tr>
3/8

</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
@endsection
@section('javascripts')

<script src="
{{url('AdminLTE/plugins/datatables/jquery.dataTables.js')
}}"></script>
<script src="{{url('AdminLTE/plugins/datatables-
bs4/js/dataTables.bootstrap4.js') }}"></script>
<script>
var table = $('#table-product').DataTable({
ajax: "{{ route ('api.product') }}",
columns: [
{"data":"name"},
{"data":"satuan"},
{"data":"buy_price"},
{"data":"sell_price"},
],
});
</script>
@endsection
perhatikan pada baris script dimana kita meload datanya menggunakan ajax dimana
datanya di dapat dari route api.product maka kita harus membuat file route api sbb :
dan tambahkan baris route baru di file api.php
sbb
Route::get('/product')->name('api.product')-
>uses('ProductController@datatables');
pada route di atas kita menggunakan
ProductController@datatables maka pada file
controller ProductController kita tambahkan
sebuah methode dengan nama datatables dan
isinya sbb :
public function datatables()
{
return datatables ( Product::all())->toJson();
}
4/8

code diatas kita meload seluruh data product dan menampilkannya dengan format json
dengan function toJson berikut potongan hasil Json product :
5/8

contoh json data product
selanjutnya kita tambahkan sebuah route baru pada file route web.php sbb :
6/8

Route::get('/yajra')->name('yajra.index')->uses('ProductController@datatablesIndex');
kita membuat route dengan nama yajra dan kita menggunakan controller
ProductController@datatablesIndex dan pada file ProductController@datatablesIndex
kita cukup mereturn view ke file view datatables yang sebelumnya sudah kita buat untuk
codenya sbb :
public function datatablesIndex()
{
return view ('product/datatables');
}
code diatas hanya mereturn view ke views datatables yang sebelumnya sudah kita buat.
dan jika tidak ada error maka seharusnya akan tampil hasilnya sbb :
Tampilan Datatables ServerSide
Untuk Live Demonya silahkan akses disini.
dan untuk source codenya anda dapat download disini
pada artikel selanjutnya kita akan membahas fitur-fitur pada datatables seperti :
show / hide column
merge column
Styling column datatables
Filter Data menggunakan textbox dan select
Dan masih banyak lagi Stay Tune ya.
Agar tidak ketinggalan silahkan cek berkala blog saya, dan jangan lupa di share ya agar
lebih banyak yang mendapatkan manfaat dari artikel ini…
7/8

Kesimpulan
Dengan menggunakan serverside datatables sangat baik untuk meload data dalam
jumlah besar karena proses load data jadi lebih cepat dari sebelumnya, dan jika anda
menggunakan laravel maka yajra datatables adalah salah satu package yang wajib anda
coba dan gunakan pada projects anda.
Spesial thanks for creator yajra Mas Arjay Angeles
Salam,
Adinata
8/8

server side datatables menggunakan yajra 1 pada laravel admin lte

Recommended

More Related Content

Similar to server side datatables menggunakan yajra 1 pada laravel admin lte (20)

More from Adi Nata (14)

server side datatables menggunakan yajra 1 pada laravel admin lte