Menambahkan Tombol Export CSV,PDF,EXCEL,Print Pada Datatables Server Side #3 Menggunakan Yajra Laravel AdminLte

Pada artikel sebelumnya kita sudah membahas bagaimana menambahkan fitur show/hide kolom pada datatables bagi anda yang belum membacanya silahkan baca disini, kali ini kita akan menambahkan fitur export pada datatatables.

Fitur-Fitur Datatables

Beberapa fitur export yang paling umum digunakan antara lain :

Pada plugin datatables fitur export dan print ini sudah disediakan dan kita tinggal menggunakannya saja pada contoh study case kali ini kita masih menggunakan source code project yang lama bagi anda yang ingin mendownload source codenya silahkan klik ,

Berikut cara menambahkan fitur export pada datatables serverside

Pertama kita load dahulu file JS yang dibutuhkan sbb :

dan agar tampilannya lebih bagus dan menarik jangan lupa file cssnya juga sbb :

setelah itu edit coding javascript datatablesnya sbb :

<script> $(document).ready(function(){ var table = $('#table-product').DataTable({ pageLength: 25, processing: true, serverSide: true, dom: '<"html5buttons">Bfrtip', language: { buttons: { colvis : 'show / hide', // label button show / hide colvisRestore: "Reset Kolom" //lael untuk reset kolom ke default } }, buttons : [ {extend: 'colvis', postfixButtons: [ 'colvisRestore' ] }, {extend:'csv'}, {extend: 'pdf', title:'Contoh File PDF Datatables'}, {extend: 'excel', title: 'Contoh File Excel Datatables'}, {extend:'print',title: 'Contoh Print Datatables'}, ], ajax: "{{ route ('api.product') }}", columns: [ {"data":"name"}, {"data":"satuan"}, {"data":"buy_price"}, {"data":"sell_price"}, ], }); }); </script>

Penjelasan code diatas sbb :

perama kita definisikan element table control sbb : dom: ‘<”html5buttons”>Bfrtip’,

Untuk Penjelasan element Dom diatas sbb :

l - length changing input control f - filtering input t - The table! i - Table information summary p - pagination control r - processing display element

untuk dokumentasi dom datatables anda bisa baca disini, Setelah itu kita tinggal menambahkan button apa saja yang ingin di tampilkan sbb :

buttons : [ {extend: 'colvis', postfixButtons: [ 'colvisRestore' ] }, {extend:'csv'}, {extend: 'pdf', title:'Contoh File PDF Datatables'}, {extend: 'excel', title: 'Contoh File Excel Datatables'}, {extend:'print',title: 'Contoh Print Datatables'}, ],

maka jika tidak ada error akan tampil tombol-tombol csv,pdf,excel,print sbb :

diatas untuk length data tidak saya tampilkan bagi anda yang ingin menampilkan cukup tambahkan element control l adalah pada Dom lengkapnya sbb :

dom: '<"html5buttons">Blfrtip',

maka length pada datatables akan tampil sbb :

Output Test Export Dan Print Buttons sbb :

Output Print sbb :

Contoh Output Excel sbb :

Contoh Output File CSV sbb :

Contoh Print sbb :

untuk live demo projectsnya anda dapat akses

untuk download source codenya silahkan klik

pada artikel selanjutnya kita akan membahas merge column ( menggabungkan kolom) pada datatables stay tune ya…

Kesimpulan :

Dengan menggunakan plugin datatables kita dapat dengan mudah menambahkan fitur export dan print pada datatables, Dengan menambahkan fitur-fitur export dan print maka akan sangat memudahkan user pengguna aplikasi kita untuk melakukan export data dan print data yang tampil pada datatables.

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.