Server Side Datatables Menggunakan Yajra #2 Show Dan Hide Kolom Pada Laravel AdminLte

DI artikel sebelumnya kita sudah membahas bagaimana melakukan integrasi datatables serverside menggunakan yajra dengan laravel dan AdminLTE bagi anda yang belum membacanya silahkan baca disini, pada artikel kali ini kita akan membahas bagaimana menggunakan fitur show dan hide datatables.

Mengapa butuh fitur show / hide kolom ?

pada saat aplikasi yang kita develop sudah di gunakan oleh user tentu secara default kolom yang kita tampilkan hanya kolom tertentu saja kita tampilkan namun kadang kala user ingin show /hide kolom yang mereka inginkan namun secara default tidak ditampilkan / di senmbunyikan sebagai contoh :

Misal pada tabel product terdapat kolom harga beli namun secara default kolom ini tidak kita tampilkan, namun jika user membutuhkan kolom tersebut tentu untuk coding lagi sangat tidak efektif maka opsinya adalah melakukan show / hide kolom secara dinamis dan fitur ini sudah ada pada datatables.

Cara melakukan konfigurasi show / hide kolom

pertama kita harus meload s tyle dan JS untuk button dan js colvis ( Column Visible )

Load File CSS :

Load file JS

di artikle sebelumnya kita sudah memiliki script datatatables sbb :

<script> var table = $('#table-product').DataTable({ ajax: "{{ route ('api.product') }}", columns: [ {"data":"name"}, {"data":"satuan"}, {"data":"buy_price"}, {"data":"sell_price"}, ], }); </script>

maka untuk menambahkan konfigurasi show/hide kolom pada datatables kita dapat tambahkan script diatas menjadi sbb :

<script> $(document).ready(function(){ var table = $('#table-product').DataTable({ pageLength: 25, processing: true, serverSide: true, dom: '<"html5buttons"B>lTfgitp', //DOM Untuk Button buttons : [ {extend: 'colvis' }, ], ajax: "{{ route ('api.product') }}", columns: [ {"data":"name"}, {"data":"satuan"}, {"data":"buy_price"}, {"data":"sell_price"}, ], }); }); </script>

maka jika tidak ada error akan tampil tombol column visibility seperti gambar dibawah ini :

jika tombol tersebut di klik akan muncul pilihan kolom-kolom yang ingin di show / hide sbb :

untuk mengganti label tombol column visibility anda dapat menambahkan baris code di bawah ini :

language: { buttons: { colvis : 'show / hide', } },

maka label button column visibility akan berubah menjadi show / hide

kita juga dapat melakukan reset setting kolom ke settingan awal ( default ) dengan cara menambahkan extension language pada buttons sbb :

language: { buttons: { colvis : 'show / hide', colvisRestore: "Reset Kolom" } }, buttons : [ {extend: 'colvis', postfixButtons: [ 'colvisRestore' ] }, ],

maka akan muncul pilihan tambahan reset kolom sbb :

untuk code lengkapnya :Sebagai Berikut :

<script> $(document).ready(function(){ var table = $('#table-product').DataTable({ pageLength: 25, processing: true, serverSide: true, dom: '<"html5buttons"B>lTfgitp', //DOM Untuk Button language: { buttons: { colvis : 'show / hide', // label button show / hide colvisRestore: "Reset Kolom" //lael untuk reset kolom ke default } }, buttons : [ {extend: 'colvis', postfixButtons: [ 'colvisRestore' ] }, ], ajax: "{{ route ('api.product') }}", columns: [ {"data":"name"}, {"data":"satuan"}, {"data":"buy_price"}, {"data":"sell_price"}, ], }); }); </script>

Di artikel selanjutnya kita akan membahas bagaimana menampilkan tombol print,Export PDF,CSV dan Excel pada datatables.

Untuk Live Demonya silahkan akses disini.

dan untuk source codenya lengkapnya anda dapat download disini

Link CDN Datatables silahkan klik disini

Kesimpulan

Dengan menambahkan fitur show / hide kolom maka user yang sedang menggunakan aplikasi kita dapat dengan mudah menampilkan atau menyembunyikan kolom sesuai keinginannya fitur ini sederhana namun akan sangat membantu jika anda menerapkannya di projects anda.

Salam,

Adinata

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