BREAKING NEWS

Menangani Jumlah Data yang Besar pada Laravel dengan Yajra DataTables Server Side

DataTables, Laravel, Website |29 March 2022 |by Agus Suratna |0

DataTables adalah sebuah plugin yang dibuat dengan framework jQuery, yang digunakan untuk menampilkan data dalam bentuk table. Selain itu di dalam DataTables juga sudah terdapat fitur pencarian dan pagination, jadi kita tidak perlu lagi repot-repot membuat modul untuk pencarian atau pagination datanya.

Jenis-jenis Datatables

Dalam Datatables terdapat 2 jenis, yaitu:

  1. Datatables Client Side
  2. Datatables Server Side

Client Side

Jadi DataTables client side itu semua pemrosesan datanya dilakukan pada sisi client, atau dilakukan pada browser yang digunakan oleh client tersebut..

Pada client side, semua data akan ditarik terlebih dahulu, kemudian baru akan ditampilkan pada browser client dalam bentuk datatables.

Cara seperti ini tidak akan jadi masalah jika data yang ditarik hanya puluhan atau ratusan saja, tapi jika sudah ribuan atau bahkan jutaan cara ini sangat tidak direkomendasikan, karena pasti akan memakan waktu sangat lama, bahkan jika kita memaksakan untuk menarik ribuan data dengan client side terkadang browser kita akan ngefreeze/ngehang. Solusinya untuk data yang berjumlah ribuan atau jutaan bisa menggunakan DataTables server side.

Server Side

DataTables Server Side adalah salah satu cara terbaik saat ini untuk menampilkan data yang berjumlah besar bahkan sampai datanya jutaan.

Jika pada client side semua data akan ditarik terlebih dahulu baru kemudian ditampilkan pada browser client. Maka pada server side sistem hanya akan menarik data yang memang ditampilkan pada satu halaman saja. Jadi walaupun ada sejuta data didalam database, tapi yang ditampilkan dalam 1 layar browser kita hanya 10 data, maka yang di tarik adalah 10 data tersebut.

Jika ingin menggantinya dengan 10 data berikutnya, maka sistem hanya akan menarik ulang 10 data saja yang baru. Jadi intinya, pada server side data hanya akan diload per 1 halaman saja, tidak langsung semua data diload.

Di laravel sendiri sudah terdapat library yang menyediakan DataTables server side, yaitu bernama Yajra Datatables.

 

Yajra Datatables

Yajra DataTables adalah sebuah library laravel untuk mempermudah kita dalam menggunakan DataTables server side. Yajra DataTables dikembangkan oleh developer bernama Arjay Angeles dari Philipina. Yajra Datatables memberikan fungsi kemudahan bagi para developer seperti pencarian, shorting data, dan pagination.

Untuk lebih mudah memahaminya, langsung saja kita coba praktekan penggunaannya dengan tahapan-tahapan seperti berikut ini :

  1. Instalasi Laravel, versi laravel yang digunakan disini adalah versi 8. Untuk cara instalasinya, bisa ikuti tutorial pada instalasi Laravel pada link berikut ini https://agussuratna.net/2020/11/27/cara-install-laravel-8-di-windows/. Pada contoh disini kita buat project dengan nama latihanlaravel, jika sudah ada tinggal lanjutkan saja dari project pada tutorial sebelumnya.
  2. Persiapan Databasenya, pada tutorial ini menggunakan database dengan nama datasekolah. Disini kita akan menggunakan 2 table, dimana table tersebut akan saling berelasi satu sama lain. Yang pertama yaitu adalah table kelas. Table ini berisi data-data kelas dengan struktur seperti berikut : Kemudian untuk table yang kedua yaitu table siswa, dengan struktur seperti berikut : Perhatikan struktur table siswa di atas, terdapat kolom idkelas dimana kolom ini akan kita relasikan ke dalam table kelas berdasarkan idkelas nya. Kemudian terdapat kolom status, dimana pada kolom tersebut kita memberikan sebuah nilai default 1. Nanti akan kita buat kondisi, jika siswa tersebut memiliki status 1 maka tandanya adalah aktif, tapi jika selain 1 maka tandanya adalah tidak aktif.
  3. Sekarang coba isi table kelas dan table siswa dengan data dummy juga seperti berikut, bisa menggunakan seeder dan feeker seperti pada tutorial sebelumnya, https://agussuratna.net/2021/04/16/tutorial-laravel-8-seeding-dan-faker-pada-laravel/. Atau bisa isi data secara manual. Pada contoh di atas, table siswa sudah diisi dengan data dummy sebanyak 10.000 data.
  4. Membuat Model, kita akan melakukan pemrosesan query dengan menggunakan Eloquent, oleh karenanya kita butuh Model untuk mewakili tiap masing-masing table, kita buat dulu model dengan nama KelasModel dan SiswaModel, dengan menjalankan perintah berikut : 
    php artisan make:model KelasModel

    dan

    php artisan make:model SiswaModel
  5. Sekarang coba kita buka file modelnya, dan modifikasi sedikit seperti berikut : 
    <?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class KelasModel extends Model
{
    use HasFactory;
    protected $table        = "kelas";
    protected $primaryKey   = 'idkelas';
    protected $keyType      = 'string';
    public $incrementing    = false;
    protected $fillable     = ['idkelas','kelas', 'idjurusan'];
}

    Di atas adalah model untuk KelasModel.php, perhatikan pada sintak di atas kita menambahkan sebuah property protected table=”kelas”; untuk menunjukkan bahwa model ini mewakili table ‘kelas‘, protected $primaryKey=’idkelas’; untuk menyatakan primary keynya adalah ‘idkelas‘, karena pada baawaan Laravel primary keynya adalah ‘id‘. Untuk model SiswaModel.php seperti berikut :

    <?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class SiswaModel extends Model
{
    use HasFactory;
    protected $table        = "siswa";
    protected $primaryKey   = 'idsiswa';
    protected $keyType      = 'string';
    public $incrementing    = false;
    protected $fillable     = ['idsiswa','nis','nama','idkelas','alamat','idekskul','status'];
}

    Sama seperti pada model KelasModel.php, pada model SiswaModel.php juga menambahkan property protected table=”siswa”; untuk menunjukkan bahwa model ini mewakili table ‘siswa‘, protected $primaryKey=’idsiswa’; untuk menyatakan primary keynya adalah ‘idkelas‘.

  6. Konfigurasi Database, untuk koneksi ke database kita buka file .env, ubah sintaknya pada bagian menjadi seperti berikut :

    DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=datasekolah
DB_USERNAME=root
DB_PASSWORD=

    ‘datasekolah‘ merupakan nama database pada MySql, silahkan sesuaikan sendiri untuk username, password, dan nama database nya sesuai dengan komputer masing-masing. Jika kamu merasa malas untuk membuat data base secara manual beserta isinya, kamu bisa langsung download database nya disini.

  7. Install Library Yajra DataTables via Composer, langkah selanjutnya kita melakukan instalasi package Yajra DataTtables. Untuk cara instalasinya kita menggunakan composer, jalankan perintah berikut di CMD atau di Terminal, sebelum menjalankan perintahnya jangan lupa pada CMD/Terminal berada pada path/direktori project kita : 
    composer require yajra/laravel-datatables-oracle:"~9.0"

    Tunggu beberapa saat hingga proses instalasinya selesai seperti pada gambar di atas

  8. Kemudian kita perlu menambahkan Datatables Service Provider dan Facade pada file “latihan_laravel/config/app.php“. Di bagian providers tambah sebuah service seperti berikut : 
    Yajra\DataTables\DataTablesServiceProvider::class,

    Pada bagian aliases, tambahkan class seperti berikut :

    'DataTables' => Yajra\DataTables\Facades\DataTables::class,

     

  9. Langkah selanjutnya kita publish configuration filenya, jalankan perintah seperti berikut : 
    php artisan vendor:publish

    Jika muncul seperti ini : Kita tekan 0 saja, kemudian tekan Enter.

  10. Mulai menampilkan data dengan Yajra Datatables, sekarang kita akan mulai menampilkan datanya. Data yang akan ditampilkan yaitu data siswa yang memiliki 10 ribu rows. Pertama kita buat route baru didalam file latihan_laravel/routes/web.php 
    <?php
    use Illuminate\Support\Facades\Route;
    use App\Http\Controllers\SiswaController;

    Route::get('/', function () {
        return view('home');
    });

    Route::get('/siswa/list','SiswaController@index');
    Perhatikan pada file web.php diatas, pada baris ke-3 kita memanggil file SiswaController, kemudian pada baris ke-10, kita membuat sebuah route dengan method get, url nya yaitu “/siswa/list“, menggunakan SiswaController yang mengarah ke function index.
  11. Selanjutnya kita buat SiswaController-nya, jalankan perintah berikut : 
    php artisan make:controller SiswaController

    Kita buka SiswaController.php-nya, kemudian tambahkan sebuah function baru dengan nama index seperti berikut :

    <?php
    namespace App\Http\Controllers;

    use Illuminate\Http\Request;

    use App\Models\SiswaModel;
    use DataTables;

    class SiswaController extends Controller
    {
        public function index(){
            return view('siswa.index');
        }
    }

    Pada function index di atas, tidak memiliki proses apapun, kita hanya langsung mengarahkannya ke view “siswa.index“.

  12. Sekarang kita  buat view-nya dengan nama file index.blade.php di dalam folder latihan_laravel/resources/views/siswa dan isi sintaknya seperti berikut : 
    <!DOCTYPE html>
<html>
    <head>
        <title>Tutorial Yajra DataTables pada Laravel</title>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
    </head>

    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>Tutorial Yajra DataTables pada Laravel</h2>
                    <div class="table-responsive">
                        <table class="table table-hover" id="table-siswa">
                            <!-- Awal header table-->
                            <thead>
                                <tr>
                                    <th>
                                        <center>ID Siswa</center>
                                    </th>
                                    <th>
                                        <center>NIS</center>
                                    </th>
                                    <th>
                                        <center>Nama Siswa</center>
                                    </th>
                                    <th>
                                        <center>Kelas</center>
                                    </th>
                                    <th>
                                        <center>Alamat</center>
                                    </th>
                                    <th>
                                        <center>Ekskul</center>
                                    </th>
                                    <th>
                                        <center>Status</center>
                                    </th>
                                    <th>
                                        <center>Aksi</center>
                                    </th>
                                </tr>
                            </thead>
                            <!-- Akhir header table-->
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
            integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>

    </body>
</html>

    Perhatikan pada view di atas, pertama pada baris ke-5, kita memanggil asset bootstrap css nya via cdn. Pada baris ke-6 kita memanggil asset css jquery datatables nya via cdn.

    Kemudian pada baris ke-15, kita mendefine sebuah table dengan beberapa header, yaitu ID Siswa, NIS, Nama Siswa, Kelas, Alamat, Ekskul dan Status.

    Perlu diperhatikan juga, di table tersebut kita mendefine atribut baru yaitu atribut id dengan nilai “table-siswa“. Nanti atribut tersebutlah yang akan dijadikan penghubung terhadap yajra nya.

    Tapi table tersebut hanya memiliki header saja, untuk body nya nanti akan kita tampilkan dengan yajra, jadi kita tidak perlu mendefine body-nya lagi di dalam struktur table tersebut.

    Pada baris ke-55 kita memanggil asset jquery js, baris ke-58 kita memanggil asset bootstrap js, dan terakhir pada baris ke-59 kita memanggil jquery datatable js via cdn. Asset-asset di atas wajib selalu kita bawa di setiap view.

  13. Untuk pemrosesan data via yajra, kita buatkan route baru lagi di file web.php seperti berikut : 
    <?php
    use Illuminate\Support\Facades\Route;
    use App\Http\Controllers\SiswaController;

    Route::get('/', function () {
        return view('home');
    });

    Route::get('/siswa/list','SiswaController@index');

    //route ke yajra
    Route::get('/siswa/list/yajra','SiswaController@yajra');

    Route diatas digunakan untuk melakukan pemrosesan data via yajra, semua query-nya akan dilakukan pada function yajra di dalam SiswaCcontroller.

  14. Selanjutnya di dalam SiswaController, kita buat function yajra seperti berikut : 
    <?php
    namespace App\Http\Controllers;

    use Illuminate\Http\Request;

    use App\Models\SiswaModel;
    use DataTables;

    class SiswaController extends Controller
    {
        public function index(){
            return view('siswa.index');
        }

        //fungsi yajra datatable
        public function yajra()
        {
            $siswa =SiswaModel::select(['idsiswa','nis','nama','idkelas','alamat','idekskul','status']);
            
            return DataTables::of($siswa)->make();
        }
    }

    Perhatikan script di atas, pada baris ke-6, kita panggil dulu model SiswaModel nya. Kemudian di baris ke-7 kita memanggil class DataTables nya. Kemudian dibaris ke-16 kita buat function baru dengan nama yajra.

    Didalamnya terdapat variable $siswa yang isinya adalah query untuk men-select kolom-kolom yang akan kita tarik dari table siswa, tapi tanpa property get().

    $siswa =SiswaModel::select(['idsiswa','nis','nama','idkelas','alamat','idekskul','status']);

    Karena kita akan mereturn-nya dalam bentuk DataTables.

    return DataTables::of($siswa)->make();

  15. Selanjutnya kita modifikasi kembali view index.blade.php, dibagian bawah dan di atas tag </body> kita tambahkan script jquery seperti berikut :

    <script type="text/javascript">
    $(document).ready(function(){
        $('#table-siswa').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ url('/siswa/list/yajra') }}",
            columns: [
                {data: 'idsiswa', name: 'idsiswa'},
                {data: 'nis', name: 'nis'},
                {data: 'nama', name: 'nama'},
                {data: 'idkelas', name: 'idkelas'},
                {data: 'alamat', name: 'alamat'},
                {data: 'idekskul', name: 'idekskul'},
                {data: 'status', name: 'status'},
            ]
        });
    })
</script>

     

Dalam tutorial ini pemahaman basic jQuery sangat diperlukan, kalau kita perhatikan gambar di atas, baris ke-63 digunakan untuk memanggil trigger tablenya berdasarkan atribut id nya.

Kemudian dibaris ke-66 kita isi dengan url yang mengarah ke pemrosesan data yajra nya yaitu “../siswa/list/yajra“..

Baris ke-68 sampai ke-75 adalah untuk mendefine isi dari masing-masing kolom header table nya, ibaratnya seperti body tablenya.

Sekarang kalo kita akses url “http://localhost:8000/siswa/list“, maka seharusnya akan tampil seperti berikut :

Kita bisa dengan mudah dan lancar mengakses data siswa yang total keseluruhan data nya sebanyak 1.706 row. Ditambah lagi sudah terdapat kolom untuk pencarian data di pojok kanan atas, serta kita juga dapat menentukan berapa jumlah data yang ingin ditampilkan dalam 1 halaman, tinggal kita pilih di pojok kiri atas.

 

Mengedit Kolom pada Yajra

Pada halaman list siswa, kita bisa melihat kolom status masih berbentuk angka 1 atau 2. Sekarang kita akan berikan kondisi, jika statusnya 1 akan kita beri nilai “Aktif“, tapi jika 2 akan kita beri nilai “Tidak Aktif“.

Caranya kita buka kembali SiswaController.php nya, pada function yajra modifikasi seperti berikut :

public function yajra()
{
    $siswa =SiswaModel::select(['idsiswa','nis','nama','idkelas','alamat','idekskul','status']);
    
    return DataTables::of($siswa)->editColumn('status',function($datasiswa)
    {
        if($datasiswa->status == 1)
        {
            return 'Aktif';
        }
        elseif($datasiswa->status == 2)
        {
            return 'Tidak Aktif';
        }
    })->make();
}

Pada sintak di atas kita menambahkan sebuah property baru yaitu editColumn, dimana pada parameter pertama kita tentukan kolom mana yang akan kita edit, karena kita akan mengedit kolom “status”, maka kita isi dengan “status”.

editColumn('status',function($datasiswa){

Kemudian di parameter kedua kita buka function baru dengan menginisialisai sebuah variable dengan nama $datasiswa. Variable tersebut digunakan untuk nge get object data siswanya.

Kemudian di dalam function tersebut kita bisa melihat ada kondisi yang dijalankan, jika data status bernilai sama dengan 1 maka akan mereturn string “Aktif“, tapi jika 2 maka akan mereturn string “Tidak Aktif“.

if($datasiswa->status == 1)
{
    return 'Aktif';
}
elseif($datasiswa->status == 2)
{
    return 'Tidak Aktif';
}

Sekarang kalo kalian buka lagi halaman http://localhost:8000/siswa/list, maka kolom status akan berubah menjadi seperti ini :

 

Render HTML Pada Yajra

Dikolom yajra, tadi sudah kita ubah dari angka menjadi keterangan aktif atau tidak aktif. Tampilannya kurang menarik jika hanya text seperti itu saja, kita akan coba percantik dengan menggunakan button class bootstrap, di SiswaController.php, pada function yajra kita modifikasi menjadi seperti berikut :

public function yajra()
{
    $siswa =SiswaModel::select(['idsiswa','nis','nama','idkelas','alamat','idekskul','status']);

    return DataTables::of($siswa)->editColumn('status',function($datasiswa)
    {
        if($datasiswa->status == 1)
        {
            return '<button class="btn btn-success btn-xs">Aktif</button>';
        }
        elseif($datasiswa->status == 2)
        {
            return '<button class="btn btn-warning btn-xs">Tidak Aktif</button>';
        }
    })->make(true);
}

Pada sintak di atas, kita me-return Aktif atau Tidak Aktif nya dengan membungkusnya menggunakan button class bootstrap. Jika kita refresh lagi halaman list siswanya, akan menjadi seperti ini :

Cara supaya kode html tersebut dapat ter-render atau terbaca kita bisa gunakan perintah rawColumns([]). Caranya seperti berikut :

public function yajra()
{
    $siswa =SiswaModel::select(['idsiswa','nis','nama','idkelas','alamat','idekskul','status']);
    
    return DataTables::of($siswa)->editColumn('status',function($datasiswa)
    {
        if($datasiswa->status == 1)
        {
            return '<button class="btn btn-success btn-xs">Aktif</button>';
        }
        elseif($datasiswa->status == 2)
        {
            return '<button class="btn btn-warning btn-xs">Tidak Aktif</button>';
        }
    })->rawColumns(['status'])->make(true);
}

Didalam rawColumns(), kita tinggal definisikan kolom-kolom apa saja yang akan dirender sebagai html, diatas kita mengisi “status” karena kolom yang ingin kita render adalah kolom status. Sekarang kita buka lagi halaman list siswanya, akan menjadi seperti ini :

Menambahkan Kolom pada Yajra

Misalkan kita ingin menambahkan kolom aksi yang berisi button edit dan juga button hapus, caranya kita bisa gunakan method addColumn() seperti berikut :

public function yajra()
{
    $siswa =SiswaModel::select(['idsiswa','nis','nama','idkelas','alamat','idekskul','status']);
    
    return DataTables::of($siswa)->editColumn('status',function($datasiswa)
    {
        if($datasiswa->status == 1)
        {
            return '<button class="btn btn-success btn-xs">Aktif</button>';
        }
        elseif($datasiswa->status == 2)
        {
            return '<button class="btn btn-warning btn-xs">Tidak Aktif</button>';
        }
    
    })
    ->addColumn('aksi',function($data)
    {

        $url_edit = url('siswa/edit/'.$data->id);
        $url_hapus = url('siswa/hapus/'.$data->id); 
        $button = '<a href="'.$url_edit.'" class="btn btn-primary">Edit</a>';
        $button .= '<a href="'.$url_hapus.'" class="btn btn-danger">Hapus</a>';

        return $button;

    })->rawColumns(['status','aksi'])->make(true);
}

Pada sintak di atas, kita membuat method baru yaitu addColumn(), disana terdapat parameter pertama yang kita isi dengan nama kolomnya.

addColumn('aksi',function($data){

Kemudian di dalamnya kita isi button edit dan juga button hapus, kedua button tersebut dibungkus dengan struktur HTML, oleh karenanya kita perlu menambahkannya juga kedalam method rawColumns().

->rawColumns(['status','aksi'])

Selanjutnya kita modifikasi pada bagian viewnya : latihan_laravel/resources/views/siswa/index.blade.php. Pada struktur table HTML-nya kita tambahkan sebuah kolom header baru dengan nama “Akasi” seperti berikut :

<thead>
    <tr>
        <th>
            <center>ID Siswa</center>
        </th>
        <th>
            <center>NIS</center>
        </th>
        <th>
            <center>Nama Siswa</center>
        </th>
        <th>
            <center>Kelas</center>
        </th>
        <th>
            <center>Alamat</center>
        </th>
        <th>
            <center>Ekskul</center>
        </th>
        <th>
            <center>Status</center>
        </th>
        <th>
            <center>Aksi</center>
        </th>
    </tr>
</thead>

Kemudian di jquery yajra nya kita tambahkan juga columns baru sesuai dengan yang sudah kita define pada controller nya seperti berikut :

<script type="text/javascript">
    $(document).ready(function(){
        $('#table-siswa').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ url('/siswa/list/yajra') }}",
            columns: [
                {data: 'idsiswa', name: 'idsiswa'},
                {data: 'nis', name: 'nis'},
                {data: 'nama', name: 'nama'},
                {data: 'idkelas', name: 'idkelas'},
                {data: 'alamat', name: 'alamat'},
                {data: 'idekskul', name: 'idekskul'},
                {data: 'status', name: 'status'},
                {data: 'aksi', name: 'aksi'},
            ]
        });
    })
</script>

Sekarang kita coba refresh kembali halaman list siswanya, pastikan juga sudah terdapat kolom aksi di list table siswanya seperti berikut :

 

Custom jumlah data per 1 halaman

Dengan DataTables secara default kita dapat menentukan berapa jumlah data yang akan ditampilkan dalam 1 halaman, tapi angkanya hanya sebatas yang sudah ditentukan saja, yaitu 10, 25, 50, dan 100 saja. Jika kita ingin menampilkan 200 data, 500 data, 1000 data, 10.000 data, atau bahkan seluruh data dalam 1 halaman kita perlu mengcustomnya, caranya kita buka kembali file view-nya (latihan_laravel/resources/views/siswa/index.blade.php) dan modifikasi seperti berikut :

<script type="text/javascript">
    $(document).ready(function(){
        $('#table-siswa').DataTable({
            "lengthMenu": [
                [ 10, 25, 50, 100, 1000, -1 ],
                [ '10 rows', '25 rows', '50 rows', '100 rows', '1000 rows', 'All' ]
            ],
            
            processing: true,
            serverSide: true,
            ajax: "{{ url('/siswa/list/yajra') }}",
            columns: [
                {data: 'idsiswa', name: 'idsiswa'},
                {data: 'nis', name: 'nis'},
                {data: 'nama', name: 'nama'},
                {data: 'idkelas', name: 'idkelas'},
                {data: 'alamat', name: 'alamat'},
                {data: 'idekskul', name: 'idekskul'},
                {data: 'status', name: 'status'},
                {data: 'aksi', name: 'aksi'},
            ]
        });
    })
</script>

Perhatikan script diatas, untuk membuat custom jumlah datanya, kita bisa gunakan perintah “lengthMenu”, kemudian di dalam lengthMenu terdapat 2 parameter Array, array pertama digunakan untuk menentukan berapa jumlah data dalam 1 halaman, parameter Array ke-2 digunakan untuk tampilan di DataTables-nya, istilahnya parameter ke-2 ini adalah perwakilan dari parameter ke-1.

Kita bisa tentukan sendiri angka-angkanya dan parameter array ke-1 dan ke-2 harus sama dan seimbang, karena saling terkait.

Dan kalau kita ingin menampilkan semua data, di parameter pertama kita bisa isi angka -1, dan di parameter kedua nya bisa kita isi dengan kalimat “All” atau “Tampilkan semua”.

Sekarang coba kita refresh kembali halaman list siswanya, maka seharusnya akan menjadi seperti berikut :

 

Export data ke Pdf / Excel / Csv / Lainnya

Salah satu kelebihan dari DataTables yaitu kita bisa langsung export datanya ke berbagai macam format, baik itu berupa excel, csv, pdf atau Copy to Clipboard.

Untuk bisa menggunakan nya, kita butuh beberapa tambahan assets yaitu DataTables Button css dan juga js nya.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js "></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>

Kita tambahkan assets di atas kedalam view-nya, silahkan dibuka kembali file index.blade.php nya :

latihan_laravel/resources/views/siswa/index.blade.php

<head>
    <title>Tutorial Yajra DataTables pada Laravel</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">
</head>

Pada script di atas, di dalam element head kita menambahkan 1 asset css baru yaitu :

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">

Kemudian dibagian bawah file, kita juga menambahkan asset js dari DataTables buttonnya seperti berikut :

<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js "></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>

Kemudin pada action jQuery yajra nya, kita juga perlu menambahkan beberapa property seperti berikut :

<script type="text/javascript">
    $(document).ready(function(){
        $('#table-siswa').DataTable({
            dom: 'lBfrtip',
            buttons: [
                'copy', 'excel', 'pdf', 'csv', 'print'
            ],

            "lengthMenu": [
                [ 10, 25, 50, 100, 1000, -1 ],
                [ '10 rows', '25 rows', '50 rows', '100 rows', '1000 rows', 'All' ]
            ],
            
            processing: true,
            serverSide: true,
            ajax: "{{ url('/siswa/list/yajra') }}",
            columns: [
                {data: 'idsiswa', name: 'idsiswa'},
                {data: 'nis', name: 'nis'},
                {data: 'nama', name: 'nama'},
                {data: 'idkelas', name: 'idkelas'},
                {data: 'alamat', name: 'alamat'},
                {data: 'idekskul', name: 'idekskul'},
                {data: 'status', name: 'status'},
                {data: 'aksi', name: 'aksi'},
            ]
        });
    })
</script>

Pada bagian property button terdapat beberapa element, ada copy, excel, pdf, csv dan print. Kita bisa menentukan sendiri urutannya dan kalau misalkan kita hanya ingin memunculkan button excel dan pdf saja, kita cukup mengisinya dengan excel dan pdf.

Sekarang kalo kita refresh halaman list siswa nya, pastikan button untuk export nya sudah muncul seperti pada gambar berikut :

 

Memanggil Relasi Eloquent pada Yajra

Jika kita perhatikan pada table siswa tepatnya pada kolom idkelas, disana yang tampil adalah ID dari kelasnya. Sekarang kita akan menampilkan nama kelasnya, caranya kita harus buat relasi terlebih dahulu antara model SiswaModel dengan model KelasModel nya. Jenis relasi yang akan kita gunakan yaitu One to Many dengan menggunakan belongsTo, kita bisa pelajari lebih lanjut di halaman official laravel nya di sini atau pada tutorial yang sudah kita bahas pada link di sini

Kita buka dulu file model SiswaModel.php nya :

latihan_laravel/app/Models/SiswaModel.php

Kita tambahkan sebuah method baru seperti berikut :

public function kelas()
{
    return $this->belongsTo('App\Models\KelasModel', 'idkelas', 'idsiswa');
}

Didalam model SiswaModel, kita membuat sebuah method baru dengan nama kelas. Di dalam method tersebut, terdapat sebuah relasi belongsTo terhadap model KelasModel yang menjadi relasi nya yaitu idkelas yang ada di dalam table siswa, berelasi dengan field idkelas yang ada di dalam table kelas.

Setelah relasinya dibuat, sekarang kita bawa relasi tersebut di controllernya, kita membawanya dengan perintah with() seperti berikut :

public function yajra()
{
    $siswa =SiswaModel::select(['idsiswa','nis','nama','idkelas','alamat','idekskul','status'])
    ->with(['kelas']);
    
    return DataTables::of($siswa)->editColumn('status',function($datasiswa)
    {
        if($datasiswa->status == 1)
        {
            return '<button class="btn btn-success btn-xs">Aktif</button>';
        }
        elseif($datasiswa->status == 2)
        {
            return '<button class="btn btn-warning btn-xs">Tidak Aktif</button>';
        }
    
    })
    ->addColumn('aksi',function($data)
    {
        $url_edit = url('siswa/edit/'.$data->id);
        $url_hapus = url('siswa/hapus/'.$data->id); 
        $button = '<a href="'.$url_edit.'" class="btn btn-primary">Edit</a>';
        $button .= '<a href="'.$url_hapus.'" class="btn btn-danger">Hapus</a>';

        return $button;

    })->rawColumns(['status','aksi'])->make(true);
}

Selanjutnya di viewnya, kita tinggal memanggilnya seperti ini :

columns: [
    {data: 'idsiswa', name: 'idsiswa'},
    {data: 'nis', name: 'nis'},
    {data: 'nama', name: 'nama'},
    {data: 'kelas.kelas', name: 'kelas.kelas'},
    {data: 'alamat', name: 'alamat'},
    {data: 'idekskul', name: 'idekskul'},
    {data: 'status', name: 'status'},
    {data: 'aksi', name: 'aksi'},
]

Yang sebelumnya kita memanggil idkelas-nya, sekarang kita panggil relasinya kemudian panggil object nya.

{data: 'kelas.kelas', name: 'kelas.kelas'},

Sekarang kalo kita refresh lagi halaman list siswanya, maka sekarang di kolom kelas yang muncul adalah nama kelas nya, bukan idkelas-nya.

 

Membuat Column Search

Pada DataTables sudah terdapat kolom search di bagian pojok kanan atas, kita bisa search apa saja di sana untuk semua kolom. Sekarang kita akan membuat kolom search lagi, tapi untuk masing-masing kolom. Caranya kita tinggal edit di bagian view-nya saja seperti berikut :

latihan_laravel/resources/views/siswa/index.blade.php

Pada bagian struktur table kita tambahkan element “tfoot” di dalamnya seperti berikut :

<table class="table table-hover" id="table-siswa">
    <!-- Awal header table-->
    <thead>
        <tr>
            <th>
                <center>ID Siswa</center>
            </th>
            <th>
                <center>NIS</center>
            </th>
            <th>
                <center>Nama Siswa</center>
            </th>
            <th>
                <center>Kelas</center>
            </th>
            <th>
                <center>Alamat</center>
            </th>
            <th>
                <center>Ekskul</center>
            </th>
            <th>
                <center>Status</center>
            </th>
            <th>
                <center>Aksi</center>
            </th>
        </tr>
    </thead>
    <!-- Akhir header table-->

    <!-- Awal footer table-->
    <tfoot>
        <tr>
            <td></td> 
            <td></td> 
            <td></td>
            <td></td>
            <td></td>  
            <td></td>
        </tr>   
    </tfoot>
    <!-- Akhir footer table-->
</table>

Kemudian pada bagian jquery yajra nya, kita tambahkan lagi sebuah method seperti berikut :

<script type="text/javascript">
    $(document).ready(function(){
        $('#table-siswa').DataTable({
            dom: 'lBfrtip',
            buttons: [
                'copy', 'excel', 'pdf', 'csv', 'print'
            ],

            "lengthMenu": [
                [ 10, 25, 50, 100, 1000, -1 ],
                [ '10 rows', '25 rows', '50 rows', '100 rows', '1000 rows', 'All' ]
            ],
            
            processing: true,
            serverSide: true,
            ajax: "{{ url('/siswa/list/yajra') }}",
            columns: [
                {data: 'idsiswa', name: 'idsiswa'},
                {data: 'nis', name: 'nis'},
                {data: 'nama', name: 'nama'},
                {data: 'kelas.kelas', name: 'kelas.kelas'},
                {data: 'alamat', name: 'alamat'},
                {data: 'idekskul', name: 'idekskul'},
                {data: 'status', name: 'status'},
                {data: 'aksi', name: 'aksi'},
            ],

            initComplete: function () {
                this.api().columns().every(function () {
                    var column = this;
                    var input = document.createElement("input");
                    $(input).appendTo($(column.footer()).empty())
                    .on('change', function () {
                        column.search($(this).val(), false, false, true).draw();
                    });
                });
            }
        });
    })
</script>

Selanjutnya kita coba refresh lagi halaman list siswanya, akan muncul  column search seperti berikut :

Untuk cara penggunaannya, kita ketikan kata di inputan pada kolom yang ingin kita cari, selanjutnya tekan enter pada keyboard, maka nanti otomatis datanya akan terfilter.

Jika saat filter kelas terdapat error seperti ini :

Error diatas muncul karena terdapat field idkelas yang ambigu, karena sebelumnya kita membawa relasi “kelas” ke dalam querynya dengan perintah “with()”. Maka kita perlu memperjelas lagi data-data yang diselect itu milik table yang mana di dalam SiswaController, dengan sintak seperti berikut ini :

public function yajra()
{
    $siswa =SiswaModel::select([
        'siswa.idsiswa',
        'siswa.nis',
        'siswa.nama',
        'siswa.idkelas',
        'siswa.alamat',
        'siswa.idekskul',
        'siswa.status'
    ])
    ->with(['kelas']);
    
    return DataTables::of($siswa)->editColumn('status',function($datasiswa)
    {
        if($datasiswa->status == 1)
        {
            return '<button class="btn btn-success btn-xs">Aktif</button>';
        }
        elseif($datasiswa->status == 2)
        {
            return '<button class="btn btn-warning btn-xs">Tidak Aktif</button>';
        }
    
    })
    ->addColumn('aksi',function($data)
    {
        $url_edit = url('siswa/edit/'.$data->id);
        $url_hapus = url('siswa/hapus/'.$data->id); 
        $button = '<a href="'.$url_edit.'" class="btn btn-primary">Edit</a>';
        $button .= '<a href="'.$url_hapus.'" class="btn btn-danger">Hapus</a>';

        return $button;

    })->rawColumns(['status','aksi'])->make(true);
}

 

Membuat Nomor Urut

Selanjutnya kita akan membuat nomor urut pada table kita, jadi kita bisa tahu data tersebut berada di nomor urut berapa. Caranya kita modifikasi terlebih dahulu file Controllernya (SiswaController.php), ubah seperti berikut :

latihan_laravel/app/Http/Controllers/SiswaController.php

public function yajra(Request $request)
{
    \DB::statement(\DB::raw('set @rownum=0'));

    $siswa =SiswaModel::select([
        \DB::raw('@rownum := @rownum + 1 AS rownum'),

        'siswa.idsiswa',
        'siswa.nis',
        'siswa.nama',
        'siswa.idkelas',
        'siswa.alamat',
        'siswa.idekskul',
        'siswa.status'
    ])
    ->with(['kelas']);

    $datatable = DataTables::of($siswa)->editColumn('status',function($datasiswa)
    {
        if($datasiswa->status == 1)
        {
            return '<button class="btn btn-success btn-xs">Aktif</button>';
        }
        elseif($datasiswa->status == 2)
        {
            return '<button class="btn btn-warning btn-xs">Tidak Aktif</button>';
        }
    
    })
    ->addColumn('aksi',function($data)
    {
        $url_edit = url('siswa/edit/'.$data->id);
        $url_hapus = url('siswa/hapus/'.$data->id); 
        $button = '<a href="'.$url_edit.'" class="btn btn-primary">Edit</a>';
        $button .= '<a href="'.$url_hapus.'" class="btn btn-danger">Hapus</a>';

        return $button;

    })->rawColumns(['status','aksi']);
    
    if ($keyword = $request->get('search')['value']) {
        $datatable->filterColumn('rownum', 'whereRaw', '@rownum + 1 like ?', ["%{$keyword}%"]);
    }
    
    return $datatable->make(true);
}

Perhatikan intak di atas, pada function yajra-nya kita ada tambahan parameter Request $request. Dibaris ke-3 kita tambahan script :

\DB::statement(\DB::raw('set @rownum=0'));

Di baris ke-5 ada tambahan script :

\DB::raw('@rownum := @rownum + 1 AS rownum'),

Pada baris ke-18 kita ubah sintaknya menjadi :

$datatable = DataTables::of($siswa)->editColumn('status',function($datasiswa)

Di baris ke-41 terdapat tambahan kondisi if :

if ($keyword = $request->get('search')['value']) {
    $datatable->filterColumn('rownum', 'whereRaw', '@rownum + 1 like ?', ["%{$keyword}%"]);
}

return $datatable->make(true);

Kemudian di view nya, kita tinggal tambahkan elemen header baru di struktur table nya, juga tambahkan kolom di jquery yajra nya seperti berikut :

<table class="table table-hover" id="table-siswa">
    <!-- Awal header table-->
    <thead>
        <tr>
            <th>
                <center>No</center>
            </th>
            <th>
                <center>ID Siswa</center>
            </th>
            <th>
                <center>NIS</center>
            </th>
            <th>
                <center>Nama Siswa</center>
            </th>
            <th>
                <center>Kelas</center>
            </th>
            <th>
                <center>Alamat</center>
            </th>
            <th>
                <center>Ekskul</center>
            </th>
            <th>
                <center>Status</center>
            </th>
            <th>
                <center>Aksi</center>
            </th>
        </tr>
    </thead>
    <!-- Akhir header table-->

    <!-- Awal footer table-->
    <tfoot>
        <tr>
            <td></td> 
            <td></td> 
            <td></td>
            <td></td>
            <td></td>  
            <td></td>
            <td></td>
            <td></td>
        </tr>   
    </tfoot>
    <!-- Akhir footer table-->
</table>

Pada element thead kita menambahkan kolom baru dengan nama “No” sebelum ID Siswa, kemudian di bagian tfoot kita juga harus menambahkan td baru.

Pada jquery yajra nya tambahkan juga seperti ini:

columns: [
    {data: 'rownum', name: 'rownum'},
    {data: 'idsiswa', name: 'idsiswa'},
    {data: 'nis', name: 'nis'},
    {data: 'nama', name: 'nama'},
    {data: 'kelas.kelas', name: 'kelas.kelas'},
    {data: 'alamat', name: 'alamat'},
    {data: 'idekskul', name: 'idekskul'},
    {data: 'status', name: 'status'},
    {data: 'aksi', name: 'aksi'},
],

Diatas kita menambahkan data rownum sebelum kolom idsiswa, sekarang kita coba refresh kembali halaman list siswanya, akan muncul kolom baru dengan nama “No”.

Nomor urut tersebut adalah untuk per 1 halaman, jika berpindah halaman maka nomor urutnya pun akan dimulai lagi dari nomor 1.

Penutup

Demikian tutorial mengenai cara menangani jumlah data yang besar pada Laravel dengan Yajra DataTables Server Side. Jika ada pertanyaan silahkan tuliskan di kolom komentar, semoga bermanfaat.

Related Post

Be the first to comment

Leave a Reply

Your email address will not be published.


*


error: Ga bisa dicopy