Penggunaan Datatable di Laravel

Pengertian

Datatable adalah plugin atau library dari jQuery yang digunakan untuk menampilkan data dalam bentuk table dan sudah terintegrasi dengan form pencarian / search, penomoran angka pada table, pagination, sehingga tidak perlu lagi membuat secara manual pada table data kita.

Mengapa menggunakan datatable ? karena datatable ini lebih mambantu kita dalam membuat suatu table yang tidak repot dalam membuat search, pagination dan lain lain. sehingga tidak memakan banyak waktu kita untuk mengerjakan satu table.

Datatable ini memiliki banyak fitur dapat dilihat di ==> https://datatables.net/ disitu sangat lengkap fitur dari datatable, namun di laravel sudah tersedia sebuah library datatable khusus bernama yajra yang dibuat oleh developer bernama Arjay Angeles dari Philipina.

Pada artikel kali ini saya berbagi bagaimana cara menggunakan datatable di laravel, untuk yang harus disiapkan adalah

1. Koneksi internet untuk download package

2. project laravel yang sudah terkoneksi ke dalam database

3. package yajra-datatable (untuk install nanti di kasih tau)

4. CSS dan JS datatables

5. sambil sediakan kopi biar enggak ngatuk (heeee)

Cara Install Datatable

Sebelumnya saya telah membuat crud tentang data teacher di laravel dan sekarang akan di tambahkan datatable maka langkah pertama pembuatannya yaitu install terlebih dahulu yajra-datatable dengan buka terminal (untuk linux ) atau cmd (windows) kemudian masuk ke folder projectnya dan masukkan perintah :

sigit@Sigit /v/w/h/scheduling-app> composer require yajra/laravel-datatables-oracle:"~9.0"

Konfigurasi Datatable

jika sudah selesai install yajra maka lanjut ke konfigurasi datatable dengan memasukkan script ke config/app.php .

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

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

Kemudian publish file konfigurasinya dengan perintah :

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

Membuat data json

Selanjutnya jika telah selesai mempublish konfignya, maka mengenerate data dalam bentuk json.

JSON sendiri singkatan dari JavaScript Object Notation adalah sebuah format untuk berbagi data.

langkah awal pembuatannya yaitu masuk ke app/routes/web.php lalu buat routing baru dengan method GET lalu masukkan seperti script dibawah :

Route::get('teacher/json','TeacherController@json');

langkah kedua gunakan perintah artisan untuk membuat controller dengan nama Teacher Controller:

sigit@Sigit /v/w/h/scheduling-app> php artisan make:controller TeacherController

langkah ketiga buat panggilan ke model (sesuaikan nama model) , kemudian buat function index untuk menampilkan data, lalu buat function json untuk mengenerate data json yang akan ditampilkan pada datatable nantinya.

untuk pengecekan apakah json yang kita ambil dapat atau tidak caranya masuk ke browser lalu masukkan pada url : localhost:8000/teacher/json pastikan bahwa sudah ( php artisan server ).

Membuat view untuk datatable

Selanjutnya buat file untuk menampilkan data dengan cara masuk ke folder app/resources/views/Layout/master.blade.php di dalam file ini kita install asset datatable seperti Bootstrap.css , DataTable css , jquery, dan DataTables.

Kemudian buat file baru untuk datatable nya dengan cara buat folder baru lalu isikan file dengan nama index.blade.php sesuai dengan function index pada controller. lalu tuliskan script berikut :

@extends('layouts.master') @section('content') <table class="table table-bordered" id="users-table"> <thead> <tr> <th>Id</th> <th>Code</th> <th>Name Indonesia</th> <th>Name Arab</th>
<th>NIP</th>
<th>Gender</th> </tr> </thead> </table> @stop @push('scripts') <script> $(function() { $('#teacher-table').DataTable({ processing: true, serverSide: true, ajax: 'teacher/json', columns: [ { data: 'code', name: 'code' }, { data: 'name_id', name: 'name_id' }, { data: 'name_ar', name: 'name_ar' }, { data: 'nip', name: 'nip' }, { data: 'gender', name: 'gender' }, ] }); }); $.fn.dataTable.ext.errMode = 'throw'; </script> @endpush

Jika sudah maka untuk mengecek apaka sudah jadi buka browser lalu ketikkan pada url : localhost:8000/teacher dan jika berhasil maka akan nampil seperti di bawah.