kali ini kita akan membuat datatable server side dengan laravel datatable https://yajrabox.com/docs/laravel-datatables/master

berbeda dengan datatable biasa yang menampilkan semua baris data lalau membagi perhalaman di bagian frontednnya di serverside baris data sudah dapat di bagi perhalaman dari bagian backend jadi tidak memberatkan bagian frontend/pengguna,sangat berguna saat data yang di tampilkan ratusan bahkan ribuan

tentunya yang pertama kalian sudah menginstall laravelnya entah menggunakan laravel installer atau menggunakan composer https://laravel.com/docs/8.x/installation

jika menggunakan composer langsung

composer create-project laravel/laravel nama_project

jika menggunakan laravel installer

laravel new nama_project

ok jika sudah terinstall dan bisa di buka di browser selanjutnya kita install laravel datatablenya

kita akan menginstall satu paket dengan plugin laravel datatable lainnya

composer require yajra/laravel-datatables:^1.5

kemudian kita ubah config/app.php dan tambahkan provider untuk librarynya

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

lalu kita install plugin js untuk library datatablenya menggunakan npm

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

jika kalian menggunakan boostrap kalian bisa menambahkan baris berikut di bagian bootsrap.js yang berada di dalam folder view/assets

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

lalu untuk stylenya di app.scss

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

langsung saja jalankan npm install dan npm run dev

jika kalian menggunakan versi laravel yang terbaru dan menggunakan tailwind css kalian bisa menggunakan link cdn dari datatablenya langsung di layout atau app.blade.php kalian

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">

<script src="{{ mix('js/app.js') }}"></script>
<script src="//cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>

lalu kita publish config dan assetnya

php artisan vendor:publish --tag=datatables

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

lanjutnya ke bagian controllernya

pertama buat class baru yang akan mengatur backend server side datatable kita

php artisan datatables:make NamaModels

kita akan menggunakan model

php artisan datatables:make Users

lalu jika berhasil maka akan terbuat file class dengan nama UsersDatatable di dalam folder app/Datatables

coba buka file tersebut dan perhatikan

bisa di lihat di dalamnya sudah langsung kode serta class-class lain yang di perlukan termasuk class model User berdasarkan penamaan kita tadi menggunakan nama Users

lanjut scroll kebawah di bagian fungsi getColumns()

kita bisa lihat kolom-kolom yang akan di tampilkan di table kita bisa menambahnya maupun menghapusnya

saya akan menambahkan kolom name dan email

kemudian buka controller kalian yang akan menampilkan view datatablenya misalnya UserController,di bagian fungsi indexnya akan kita rubah

public function index(UsersDataTable $dataTable)
    {
        return $dataTable->render('user.index');
    }

jangan lupa masukan class UsersDatatablenya juga

use App\DataTables\UsersDataTable;

lanjut ke bagian viewnya

<div class="table-responsive p-2">
                    {{$dataTable->table()}}
                </div>

kita juga memasukan script js dari variable $dataTablenya

jika kalian menggunakan laravel versi terbaru dan menggunakan livewire

<x-slot name="scripts">
        {{$dataTable->scripts()}}
    </x-slot>

jika menggunakan laravel blade biasanya kalian juga bisa menggunakan @stack yang ada di layout bladenya

misal @stack(‘scripts’) maka

@push('scripts')
        {{$dataTable->scripts()}}
    @endpush

ok sekarang coba buka halaman yang ada datatablenya

tampilannya kira kira akan seperti itu

seperti yang tadi saya maksud bahwa plugin-plugin untuk datatableny adalah tombol-tombol bawaan seperti create export hingga tombol print

untuk tombol exportnya ada pdf,csv,excel tapi untuk bisa menggunakannya kalian harus menginstall library lainnya lagi yaitu untuk pdf adalah https://github.com/barryvdh/laravel-snappy dan untuk excel adalah https://laravel-excel.com/

jika kalian tidak ingin menggunakan tombol-tombol tersebut atau hanya menggunakan beberapa kalian bisa mengeditnya di class UsersDataTabel di bagian fungsi html()

jika kalian tidak mau menggunakan tombolnya kalian bisa menghapus dari bagian dom dan buttonsnya

maka tampilannya akan seperti ini

kemudian jika kalian perhatikan ada kolom tambahan yaitu Action dengan isian users.action,secara default users.action merujuk ke file views yang akan di render namun jika tidak di temukan maka akan di anggap string biasany seperti namanya kolom Action bisa kita gunakan untuk menaruh tombol edit,detail,hapus dan lainnya

untuk itu kita bisa membuat view baru untuk user.action atau lainnya sama halnya dengan penamaan dan pemanggilan file view

mislanya saya akan menggunakan view user.action

lalu buka kembali class UsersDataTable-nya lalu ubah bagian fungsi dataTable()

perhatikan bagian addColumn(‘action’,’user.action’) untuk parameter pertama merupakan nama untuk kolom custom kita yang bernama kolom action kemudian parameter kedua merupakan nama/path dari views kita bisa di lihat tadi sata membuat viewnya di user/action.blade.php jadi pemanggilan viewnya adalah user.action

kembali ke file user/action.blade.php kita tambahkan beberapa tombolnya

<a href="{{ url('user/'.$id.'/edit') }}" class="btn btn-warning btn-sm">Edit {{ $name }}</a>

bisa kita lihat laravel datatable otomati akan mengubah setiap kolom menjadi masing-masing variable tersendiri kolom id akan tersedia sebagai variable $id begitu juga dengan kolom name akan tesedia variable dengan nama $name

maka jika kita buka lagi halamannya

kemudian bagaimana memdindahkan urutan halaman misal umumnya kita menaruh kolom action yang ada tombolnya di bagian kanan,kita bisa mengubah urutannya di class UserDataTable di bagian fungsi getColumns()

yang sebelumnya kolom action berada di sebelum id kita ubah menjadi sesudah kolom updated_at

kalian juga bisa mengatur urutan kolom lainya

kemudian kita akan mengganti kolom id dengan kolom no urut tentunya secara umum nomor urut tidak ada di database dan hanya tampil di table

buka kembali class UserDataTable lalu ubah di bagian dataTable() kita tambahkan kolom index yang berfungsi sebagai no urut

public function dataTable($query)
    {
        return datatables()
            ->eloquent($query)
            ->addColumn('action', 'user.action')
            ->addIndexColumn();//no urut
    }

lalu kita perlu menambahkan lagi di bagian getColumn() sama halnya dengan column action

protected function getColumns()
{
    return [
        Column::computed('DT_RowIndex')->title('No')->orderable(false)->searchable(false),//kolom no urut
        Column::make('id'),
        Column::make('name')->title("Nama Lengkap"),//memeberikan alias atau nama lain saat di tampilkan di tabel
        Column::make('email'),
        Column::make('created_at'),
        Column::make('updated_at'),
        Column::computed('action')
                ->exportable(false)
                ->printable(false)
                ->width(60)
                ->addClass('text-center'),
    ];
}

kolom index secara default bernama DT_RowIndex tentunya kita ingin menampilkan nama kolom yang jelas di tabel nanti jadi kita bisa menggunakan fungsi ->title() untuk memberikan nama atau alias kepada kolom terntentu misal disini kolom DT_RowIndex akan di tampilkan di table sebagai kolom No,title() jiga bisa digunakan di kolom lainnya misalnya kolom name menjadi nama lengkap

maka hasilnya akan seperti ini