Menggabungkan Kolom ( Merge ) Pada Datatables ServerSide #4 Menggunakan Yajra Laravel AdminLte

Adinata
3 min readMar 29, 2020

--

Di artikel sebelumnya kita sudah membahas bagaimana menambahkan tombol export datatable ke format csv,excel,pdf dan print data pada datatables bagi anda yang ingin membacanya silahkan baca disini.

Pada artikel kali ini kita akan membahas bagaimana menggabungkan column pada datatables ( merge column ), pada study case ini kita masih menggunakan source code yang sama dengan artikel sebelumnya bagi anda yang ingin mendownload source codenya silahkan download disini

Pada Study Case kita kita menggunakan table products denggan field sbb :

disini saya ingin menggabungkan field name dan satuan berikut cara menggabungkannya pada datatables :

columnDefs : [{ render : function (data,type,row){ return data + ' - ( ' + row['satuan'] + ')'; }, "targets" : 0 }, {"visible": false, "targets" : 1} ] });

penjelasan code diatas kita menggabungkan kolom name dan satuan dimana column name di = 0 , dan kita melakukan hide column satuan dimana column satuan = 1 untuk detail urutan kolom nya sbb :

Dan hasil penggabungannya kita render dengan format sbb :

return data + ' - ( ' + row['satuan'] + ')';

untuk hasilnya sebelum di gabungkan sbb :

dan hal menariknya walaupun anda sudah melakukan merge fitur search datatables masih dapat anda gunakan apakah itu anda melakukan search bedasarkan nama ataupun anda melakukan search berdasarkan column satuan.

untuk live demo projectsnya anda dapat akses

untuk download source codenya silahkan klik

pada artikel selanjutnya kita akan membahas bagaimana melakukan filter data pada datatables stay tune ya…!!!

Kesimpulan

Dengan memanfaatkan fitur merge maka kita dapat menggabungkan kolom-kolom yang memungkinkan kita lakukan merge sehingga kolom yang anda tampilkan tidak terlalu banyak sehingga tidak membuat pengguna aplikasi anda merasa pusing melihat kolom-kolom yang banyak, semakin simple aplikasi data yang anda sajikan maka akan semakin mudah dimengerti oleh user.

silahkan share artikel ini agar lebih banyak yang mendapatkan manfaat dari artikel ini…

banyak teman banyak rejeki guys…

Salam,

Adinata

Originally published at https://adinata.id on March 29, 2020.

--

--

Adinata
Adinata

Written by Adinata

Saya merupakan seorang fullstack developer dan wirausaha saya rutin membagikan tulisan saya seputar fullstack developer di website : https://midteknologi.com/

No responses yet