Penjelasan Laravel DataTables
Pada tutorial kali ini saya akan menjelaskan bagaimana cara mengintegrasikan Laravel dengan DataTables dengan menggunakan package dari Yajra Box dan akan kita integrasikan dengan Project Laravel yang kita buat.
Install Menggunakan Composer
Masukan perintah :
# Jika ingin menginstall keseluruhan termasuk html builder dan buttons
composer require yajra/laravel-datatables-oracle:"~9.0"
# Jika Hanya ingin sebagian yang di install
composer require yajra/laravel-datatables
Itu untuk menginstall semua package dari Laravel Datatables dari Yajrabox, untuk mempublish package gunakan perintah :
Laravel DataTables
Fungsi untuk mempublish Laravel Datatables
dan akan mempublish semua package dari Yajra Datatables beserta Service implementation :
php artisan vendor:publish --tag=datatables
HTML Builder Plugin
Jika ingin mempublish Package html buildernya anda juga bisa mempublish satu per satu package yang ada di dalamnya :
php artisan vendor:publish --tag=datatables-html
Buttons Plugins
Jika ingin mempublish package button yang ada di package Yajra Datatables
php artisan vendor:publish --tag=datatables-buttons
Penggunaan Laravel Datatables Service Implementation
Kenapa menggunakan Service Implementation
? karena ini akan memudahkan anda jika anda pemula dalam mengimplementasikan Datatables di Laravel. bahkan kode anda bisa menjadi lebih rapi juga mengurangi sedikit penulisan jquery
atau ajax
.
Oke Saatnya kini membuat datatables untuk User, Untuk Membuat Class DataTables sekarang masukan perintah :
php artisan datatables:make UsersDataTable
Dan sekarang kita punya file di App\DataTables\UsersDataTable
lalu anda akan melihat :
<?php
namespace App\DataTables;
use App\Models\User;
use Yajra\DataTables\Services\DataTable;
class RolesDataTable extends DataTable
{
public function dataTable($query)
{
return datatables($query)
->addColumn('action', 'users.action');
}
public function query(User $model)
{
return $model->newQuery();
}
public function html()
{
return $this->builder()
->columns($this->getColumns())
->minifiedAjax()
->addAction(['width' => '80px'])
->parameters($this->getBuilderParameters());
}
protected function getColumns()
{
return [
'id',
'name',
'email',
'created_at',
'updated_at'
];
}
protected function filename()
{
return 'users_' . date('YmdHis');
}
}
Perhatikan untuk nanti akan kita tambahkan fitur buttons di datatables ini :
->addColumn('action', 'users.action');
Nanti anda bisa membuat buttons dengan menambahkan file di resources/views/users/action.blade.php
dengan sample seperti ini :
{!! Form::open(['route' => ['users.destroy', $id], 'method' => 'delete']) !!}
<a href="{{ route('users.show', $id) }}" class='btn btn-default btn-icon'>
View
</a>
<a href="{{ route('users.edit', $id) }}" class='btn btn-default btn-icon'>
Edit
</a>
{!! Form::button('Hapus', [
'type' => 'submit',
'class' => 'btn btn-default btn-icon',
'onclick' => "return confirm('Are you sure?')"
]) !!}
{!! Form::close() !!}
Buat UserController
Lalu Buatlah Controller dengan memasukan perintah :
php artisan make:controller UserController
Dan akan membuat file App\Http\Controllers\UserController
lalu edit dan tulis seperti ini :
<?php
namespace App\Http\Controllers\General;
use App\DataTables\UserDataTable;
use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Http\Request;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(UserDataTable $datatables)
{
return $datatables->render('users.index');
}
...
Buat lah file users/index.blade
di folder resources/views
kurang lebih seperti ini :
@extends('layouts.app')
@section('title', 'User Management')
@section('content')
<div class="mb-5">
<div class="card">
<div class="card-header pb-0">
<h5 class="pb-0 mb-0">Data User</h5>
</div>
<div class="card-body">
// Jika ingin menambahkan Class css bisa disini
{!! $dataTable->table(['class' => 'table table-bordered']) !!}
</div>
</div>
</div>
@endsection
@push('scripts')
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="/vendor/datatables/buttons.server-side.js"></script>
{!! $dataTable->scripts() !!}
@endpush
Buat Route Untuk User
Untuk membuat Controller anda berjalan dengan Datatables tadi yang kita buat kita tambahkan route
untuk users
tadi di folder routes/web
:
<?php
use App\Http\Controllers\UserController;
use Illuminate\Support\Facades\Route;
...
Route::resource('users', UserController::class);
...
Lalu anda bisa mengakses laravel anda di laravelku.test/users
dan akan langsung muncul list datatables users tadi.
Demikian tutorial Menggunakan Laravel Datatables dari Yajra Untuk tahap selanjutnya anda bisa menambahkan Ajax Filter dengan menambahkan Scope Datatables
di artikel Menambahkan Scope dan Ajax Filter di Laravel Datatables dari Yajra