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

setelah proses diatas selesai langkah selanjut nya buka file config/app.php sbb :

Dan Lakukan Register yajra pada provider and facade sbb :

'providers' => [ ..., Yajra\DataTables\DataTablesServiceProvider::class, ]
'aliases' => [ ..., 'DataTables' => Yajra\DataTables\Facades\DataTables::class, ]

setelah itu lakukan configuration dengan cara ketik command sbb :

php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"

berikut prosesnya :

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 :

dan untuk code nya isi sbb :

@extends('layouts.app2') @section('styles') <!-- DataTables --> <link rel="stylesheet" href="{{url('AdminLTE/plugins/datatables-bs4/css/dataTables.bootstrap4.css') }}"> @endsection @section('content') <!-- Content Header (Page header) --> <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><!-- /.col --> <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><!-- /.col --> </div><!-- /.row --> </div><!-- /.container-fluid --> </div> <!-- Main content --> <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> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> </div> </section> @endsection @section('javascripts') <!-- DataTables --> <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(); }

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

selanjutnya kita tambahkan sebuah route baru pada file route web.php sbb :

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 :

Untuk Live Demonya silahkan akses disini.

dan untuk source codenya anda dapat download

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…

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

Originally published at https://adinata.id on March 26, 2020.