Cara install Yajra Datatables pada Laravel 5.4

Selasa, 27 November 2018 1 Komentar Edit

Yajra Datatables adalah sebuah plugins Datatables yang sudah Server Side dan khusus digunakan untuk Laravel.

Bagi kamu yang belum tau tentang Datatables, bisa serching sendiri ya di mbah gugel, intinya dia adalah sebuah table, tapi sudah memiliki fitur filter/pencarian, sorting, dan pagination, jadi lebih mudah untuk mencari dan mengolah data yang ada didalam table.

Instalasi :

Pertama

Untuk cara menginstall Yajra pada laravel 5.4, Jalankan perintah dibawah ini melalui CMD atau terminal didalam direktori project kamu :

composer require yajra/laravel-datatables-oracle:^7.0

Kedua

Tunggu sampai proses nya selesai, setelah selesai, buka file config/app.php, kemudian tambahkan baris berikut didalam profiders :

'providers' => [
// ... Yajra\Datatables\DatatablesServiceProvider::class,
],

Ketiga

Masih didalam config/app.php, tambahkan alias berikut

'Datatables' => Yajra\Datatables\Facades\Datatables::class,

Keempat

Setelah semua langkah diatas sudah dilakukan, maka selanjutnya adalah mempublish configuri dan asset nya, ketikkan perintah berikut pada Terminal atau CMD :

php artisan vendor:publish --tag=datatables

Langkah Installasi Selesai..

Cara Menggunakan nya :

Jangan lupa untuk menambahkan use Datatables; pada Controller Kamu, sebagai contoh sekarang didalam controller kita buat function yang bernama yajra()

use Datatables;
public function yajra(Request $request) { DB::statement(DB::raw('set @rownum=0')); $users = User::select([ DB::raw('@rownum := @rownum + 1 AS rownum'), 'id', 'name', 'email', 'created_at', 'updated_at']); $datatables = Datatables::of($users); if ($keyword = $request->get('search')['value']) { $datatables->filterColumn('rownum', 'whereRaw', '@rownum + 1 like ?', ["%{$keyword}%"]); } return $datatables->make(true); }

Di View nya tambahkan kode Javascript seperti ini :

$('#users-table').DataTable({ processing: true, serverSide: true, ajax: 'https://datatables.yajrabox.com/eloquent/row-num-data', columns: [ // or just disable search since it's not really searchable. just add searchable:false {data: 'rownum', name: 'rownum'}, {data: 'id', name: 'id'}, {data: 'name', name: 'name'}, {data: 'email', name: 'email'}, {data: 'created_at', name: 'created_at'}, {data: 'updated_at', name: 'updated_at'} ] });

Selesai deh.. mudah kan?