Tutorial Laravel 6 - Memberi Warna Berbeda pada Baris di Datatable

 

Tutorial kali ini adalah mengenai bagaimana cara memberi warna yang berbeda pada baris di datatable berdasarkan data yang dihasilkan. Contoh penggunaan sederhananya misal jika anda memiliki satu halaman yang berisi daftar transaksi. Anda bisa menggunakan cara ini untuk memberi warna berbeda (misal warna merah) pada baris-baris transaksi yang belum dibayar. 

Tujuannya adalah untuk memudahkan pembedaan transaksi yang sudah dibayar dan transaksi yang belum dibayar walaupun pada kenyataannya akan lebih memudahkan jika anda memberikan fitur filter pada halaman tersebut. 

Baca juga :

Tutorial Laravel 5.5 - Datatables

Berikut ini adalah contoh kode dari datatable yang saya sudah buat 

<script>
$('.dataTable').dataTable({
processing: true,
serverSide: false,
                        "createdRow": function( row, data, dataIndex){
if (data.total_paket_text == ""){
$(row).addClass('redClass');
}
                         },
ajax: "<?=url('backend/save-kontrak/datatable?gathering='.$list_gathering_);?>",
columns: [
{data: 'cabang', name: 'cabang'},
                                {data: 'tanggal_gathering', name: 'tanggal_gathering'},
                                {data: 'kode_customer', name: 'kode_customer'},
{data: 'nama_customer', name: 'nama_customer'},
                                {data: 'total_paket_text', name: 'total_paket_text', orderable: false, searchable: false},
                                {data: 'action', name: 'action', orderable: false, searchable: false}
],
responsive: true,
                        order : [[ 0, "asc" ]],
pageLength : 50
});
    </script>

Yang perlu diperhatikan pada contoh kode di atas adalah kode berikut

                        "createdRow": function( row, data, dataIndex){
if (data.total_paket_text == ""){
$(row).addClass('redClass');
}
                         },

Fungsi dari kode di atas adalah saya menambahkan class "redClass" pada baris datatable yang dibuat jika data.total_paket_text kosong. Di sini tentu saja anda dapat menyesuaikan kode dengan kebutuhan syarat-syarat dari program yang anda buat. Intinya adalah dengan menambahkan class tertentu pada baris yang dibuat saat data yang dihasilkan memenuhi kondisi tertentu.

Langkah terakhir adalah dengan menambahkan css redClass seperti contoh di bawah ini 

            .redClass{

                background : #aa0000 !important;

                color : #fff !important;

            }

Sekali lagi untuk isi dari css tersebut dapat anda sesuaikan sendiri dengan keinginan anda bagaimana tampilan yang anda inginkan.

Demikian penjelasan singkat saya pada artikel kali ini. Seperti biasa, untuk pertanyaan dapat anda tuliskan pada kolom komentar di bawah. Sebisa mungkin saya akan menjawabnya. Terima kasih.

Bagikan Artikel ini