Laravel Tutorial Memperoses datatables server side menggunakan Yajra

Tutorial kali ini kita akan mencoba menampilkan data list user dengan yajra datatables dengan mekanisme server side. sehingga load time saat ditampilkan lebih optimal.

Saya asumsikan anda sudah mempunyai Model User dan controller User. dan juga pada route sudah ditambahkan routing untuk index user. Misal routing index user anda  seperti ini :

Route::group(['prefix' => 'user'], function () {
        Route::get('/', 'UserController@ajaxindex')->name('user.index');
       });


Tambahkan public function "ajaxindex" pada UserController anda seperti dibawah ini :

public function ajaxindex(Request $request)
    {
    if(request()->ajax()) {
            return datatables()->of(User::)
             ->addColumn('action', function (User $users) {
                return view('halaman.user.action',compact('users'));
            })
            
            ->addIndexColumn()
            ->make(true);
        }
        return view('halaman.user.index');


fungsi diatas berarti ruqest berupa ajax kemudian return nya adalah model User, sehingga akan didapat data dari kolom pada model atau table user. Kemudian ditentukan return view nya ke blade yang berada pada direktori halaman/user/  dengan nama blade index.blade.php. Pada fungsi diatas juga ditambahkan return untuk memanggil blade yang berfungsi sebagai tombol action action.blade.php.

Setelah itu pada index.blade.php silahkan di tambahan js untuk memanggil fungsi diatas. Lihat contoh dibawah;


<script type="text/javascript">
    $(document).ready( function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $('#data_users').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('user.ajaxindex') }}",
            columns: [
            { data: 'id', name: 'id' },
            { data: 'nama', name: 'nama' },
            { data: 'nip', name: 'nip' },
            { data: 'role', name: 'role' },
            { data: 'devisi', name: 'devisi' }
            {data: 'action', name: 'action', orderable: false},
            ],
 
            order: [[0, 'asc']],
              "scrollX": true,
                   "scrollX": true,
                   "autoWidth":true,
        dom: 'Bfrtip',
        buttons: [
             'excel', 'pdf'
        ]
    
        });
    }); 

    
</script>


penjelasannya adalah akan memanggil data dengan route : user.ajaxindex diproses serverside. pada <tbody></tbody> dari datatables yang ditampilkan adalah kolom id user, nama, nip, role, devisi dan kolom action ( yang berisi tombol ). kemudian juga ditambahkan dom untuk tombol export ke excel dan pdf.

Setelah itu tambahkan table pada blade index.blade.php seperti contoh dibawah :

<div class="card-block">
                <table id="data_users" class="display table table-bordered" cellspacing="0" width="100%">
                 <thead>
                    <tr>
                        <th>ID</th>
                        <th>Nama</th>
                        <th>NIP</th>
                        <th>Role User</th>
                        <th>Devisi</th>
                        <th style="min-width:140px">Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
                </table>
            </div>


Silahkan anda run php artisan serve kemudian buka route user index.

Wassalam