Laravel Datatables sangat membantu bagi para developer dalam menyajikan data dalam bentuk table disertai dengan fitur paging, searching dan sorting tanpa perlu membuat script untuk membuat fitur tersebut.
Salah satu package datatables yang dapat kita gunakan pada framework Laravel adalah yajra/laravel-datatables-oracle. Sebuah library datatables bernama yajra ini dikembangkan oleh developer bernama Arjay Angeles dari Philipina. Yajra Datatables memberikan fungsi kemudahan bagi para developer seperti pencarian, shorting data, dan pagination.
Pada artikel laravel datatables ini saya menggunakan project yang telah saya install pada pembahasan sebelumnya, jadi saya tidak perlu menginstall project Laravel lagi dari awal.
Bagi yang belum install project Laravel bisa membaca artikel : Melakukan Intalasai Framework Laravel dan Syaratnya
Install Datatbles Pada Framework Laravel
Untuk menginstall datatables maka pertama-tama buka jendela Terminal/Command Prompt, lalu dengan perintah change directory (CD) arahkan pada project Laravel Anda, kemudian ketikan perintah berikut ini :
composer require yajra/laravel-datatables-oracle
Lalu sambil minum-minum kopi 🙂 tunggulah hingga proses instalasi selesai dengan sempurna. Setelah proses instalasi package datatables selesai dengan sempurna, langkah selanjutnya adalah kita melakukan konfigurasi datatables pada project Laravel kita agar bisa kita gunakan.
Konfigurasi Datatable Pada Framework Laravel
Setelah proses instalasi library yajra datatables selesai, maka tahapan selanjutnya adalah melakukan konfigurasi dengan mendaftarkan pada provider dan facade pada project Laravel. Buka file “config/app.php” lalu tambahkan dua bari kode berikut pada block provider dan aliases, seperti contoh berikut :
'providers' => [
...,
Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
...,
'Datatables' => Yajra\DataTables\Facades\DataTables::class,
]
Setelah mendaftarkan Yajra datatables pada project Laravel, langkah selanjutnya adalah memanggilnya pada file controller untuk tujuan penggunaan menampilkan data dalam bentuk datatable.
Membuat Routes
Disini saya meregisterkan route sesuai kebutuhan saja, seperti berikut :
Route::get('/kontak', 'KontakController@index')->name('kontak');
Route::get('/kontak/json', 'KontakController@datajson')->name('json');
Membuat Data Json
Agar datatables yang ter-install pada project Laravel dapat kita gunakan pada controller, maka kita harus memanggilnya terlebih dahulu. Anda dapat menambahkan kode use Datatables; untuk memanggil datatable agar dapat digunakan. Selanjutnya kita akan menggunakan datatable untuk menggenerate data dalam format json seperti tampak pada controller berikut :
Simpan kembali file controller yang sudah disertai pemanggilan datatables, sehingga file controller seperti tampak berikut :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Datatables;
use App\Kontak;
class KontakController extends Controller
{
public function __construct()
{
$this->middleware('auth');
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('kontak.index');
}
public function datajson()
{
return Datatables::of(Kontak::all())->make(true);
}
Lalu jalankan project Laravel Anda dengan mengetikkan perintah artisan berikut :
php artisan serve
Buka browser dan jalankan url project Anda, disini saya akan mengakses url project dengan alamat seperti berikut :
localhost:8000/kontak/json
Jika berjalan dengan baik maka akan ditampilkan halaman berupa data json seperti berikut :
Membuat View Untuk Menampilkan Data
Langkah selanjutnya adalah membuat file view untuk menampilkan data nya, karena disini saya menggunakan project Laravel yang sudah ada sebelumnya maka saya hanya perlu memodifikasi file “app.blade.php” pada folder “resources/views/layouts/app.blade.php”, buka file “app.blade.php” lalu tambahkan tambahkan kode sehingga menjadi seperti berikut :
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item">
<a href="{{ url('kontak')}}" class="nav-link">Kontak</a>
</li>
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
@yield('content')
</main>
</div>
@stack('scripts')
</body>
</html>
Kemudian buka file view “index.blade.php” pada folder “resources/views/kontak/index.blade.php”, lalu modifikasi dan tambahkan kode sehingga menjadi seperti berikut:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">Daftar Kontak</div>
@if($message = Session::get('status'))
<div class="alert alert-success alert-dismissable">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
<p>{{$message}}</p>
</div>
@endif
<div class="card-body">
<a href="#" class="btn btn-sm btn-success">Tambah</a>
<table id="tbl_list" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>No</th>
<th>Nama Lengkap</th>
<th>Email</th>
<th>Pekerjaan</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('scripts')
<script type="text/javascript">
$(document).ready(function () {
$('#tbl_list').DataTable({
"aLengthMenu": [
[5,10, 25, 50, 100, 200, -1],
[5,10, 25, 50, 100, 200, "All"]
],
paging: true,
processing: true,
serverSide: true,
ajax: '{{ url('kontak/json') }}',
columns: [
{ data: 'id', name: 'id' },
{ data: 'nama_lengkap', name: 'nama_lengkap' },
{ data: 'email', name: 'email' },
{ data: 'pekerjaan', name: 'pekerjaan' },
{ data: 'alamat', name: 'alamat' }
]
});
});
</script>
@endpush
Sekarang saatnya kita menjalankan project Laravel datatables yang telah kita buat, buka kembali browser Anda lalu jalankan url seperti berikut :
localhost:8000/kontak
Jika berjalan dengan baik, maka akan ditampilkan halaman seperti berikut :
Nah teman-teman sekalian, begitulah step by step tutorial menampilkan data dengan datatable pada framework laravel, semoga tutorial kali ini dapat membantu dan memberi manfaat. Kami mohon maaf jika terdapat kesalahan pada penulisan kata. Terimakasih..