Sesuai janji saya pada cerita sebelumnya,sekarang saya akan menjelaskan cara memasang Datatable ke projek Laravel.

Seperti yang disebut pada cerita sebelumnya, bahwa Datatable sejatinya adalah plugin jQuery.

Maka cara menggunakannya pun seperti plugin jQuery pada umumnya.

Yaitu kita menyiapkan dulu elemen DOM yang akan kita jadikan sebagai Datatable. Dalam hal ini tentu adalah elemen HTML yaitu table.

Kemudian disusul dengan kode javascript atau lebih tepatnya kode jQuery untuk mengaktifkan Datatable.

Cara di atas merupakan penggunaan plugin jQuery secara umum. Jika kita mengaktifkan Datatable pada projek Laravel dengan cara tersebut bisa saja, tetapi kita akan kehilangan banyak kenyamanan yang ada di Laravel.

Terutama saat kita ingin melakukan konfigurasi Datatable lanjutan.

Oleh karena itu, cara yang lebih disarankan adalah dengan memanfaatkan package khusus Datatable untuk Laravel yakni yajra/laravel-datatables.

Dengan menggunakan yajra/laravel-datatables, kita akan tetap mendapatkan kenyamanan Laravel dalam mengkonfigurasikan Datatable.

Selain itu terdapat plugin tambahan yaitu HTML builder dan Buttons.

Dengan HTML builder kita bisa mengkonfigurasi beberapa aspek Datatable dari kode PHP dengan sintaks Laravel tentu saja.

Dan dengan plugin Buttons kita bisa mengkonfigurasi tombol apa saja yang akan ditampilkan di Datatable dengan sintaks Laravel tentunya.

Untuk menampilkan Datatable dasar dengan yajra/laravel-datatables, caranya sangat mudah yaitu seperti berikut:

1. Install yajra/laravel-datatables

Buka terminal / cmd lalu pindah ke direktori projek yang sudah kamu clone sebelumnya.

Jalankan perintah berikut di terminal:

composer require yajra/laravel-datatables

Jika berhasil, maka package laravel-datatables akan terpasang di project kita.

2. Publish vendor assets

Setelah itu kita perlu melakukan publish assets datatables yang akan kita gunakan dengan perintah berikut:

php artisan vendor:publish --tag=datatables

Lalu kita juga perlu mempublish asset untuk plugin DataTable yaitu Buttons dengan perintah ini:

php artisan vendor:publish --tag=datatables-buttons

3. Konfigurasi laravel/ui

Berikutnya kita juga memasang package laravel/ui, ini karena sejak Laravel versi 8, laravel/ui merupakan package terpisah. Selain itu, kita memasang laravel/ui juga karena DataTables memerlukannya.

Jalankan perintah ini:

composer require laravel/ui --dev 

Kemudian kita juga akan mengaktifkan otentikasi bawaan dengan laravel/ui dan menggunakan bootstrap sebagai CSS frameworknya, sekali lagi karena datatable memerlukan bootstrap, jalankan perintah berikut:

php artisan ui bootstrap --auth

Perintah tersebut selain menginstall dependency juga akan membuat sebuah file yaitu resources/scss/app.scss yang akan kita pakai untuk menaruh asset datatable.

4. Install node dependencies Setelah itu kita perlu menginstall dependency javascript dengan perintah berikut:

yarn install

atau jika kamu menggunakan NPM, gunakan perintah berikut:

npm install 

5. Install datatables.net Assets

Jika sebelumnya kita sudah mempublish asset package yajra/laravel-datatables maka sekarang kita perlu juga menginstall asset yang diperlukan oleh pustaka datatables.net yang akan dicompile ke file javascript kita menggunakan laravel mix.

Oleh karena itu kita akan menginstallnya menggunakan yarn atau npm seperti ini:

yarn add datatables.net-bs4 datatables.net-buttons-bs4

Jika menggunakan npm:

npm install datatables.net-bs4 datatables.net-buttons-bs4 --save

6. Register assets di bootstrap.js dan app.scss

Setelah itu, kita buka file resources/js/bootstrap.js kemudian tambahkan kode di bawah ini:

// .... kode sebelumnya ... //
 
require('bootstrap');
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');

Dan kita buka file resources/scss/app.scss kemduian tambahkan kode berikut:

// ... kode sebelumnya ... //
 
// DataTables
@import "~datatables.net-bs4/css/dataTables.bootstrap4.css";
@import "~datatables.net-buttons-bs4/css/buttons.bootstrap4.css";

7. Compile assets Jika sudah maka sekarang kita perlu melakukan kompilasi asset untuk javascript dan css kita, karena kita sudah melakukan penambahan-penambahan asset di atas.

Jalankan perintah:

yarn dev 

atau jika menggunakan npm:

npm run dev  

Jika sudah selesai perintah tersebut dieksekusi, kita siap untuk membuat datatable pertama kita.

8. Modifikasi layouts/app

Buka file resources/views/layouts/app.blade.php kemudian pada bagian head hapus script berikut:

<script src="{{ asset('js/app.js') }}"></script>

Kemudian setelah </body> tambahkan script yang diperlukan untuk DataTable berikut:

<script src="{{ mix('js/app.js') }}"></script>
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
@stack('scripts')

Demikianlah langkah-langkah untuk memasang Datatable ke projek Laravel dengan package yajra/laravel-datatable.

Di cerita selanjutnya akan kita bahas konfigurasi apa saja sih yang bisa dilakukan dengan yajra/laravel-datatables. Stay tune ya.