Haloo sobat, tutorial yang akan saya bagikan saat ini merupakan tutorial paling singkat hehe tapi sejauh ini lumayan membantu pekerjaan saya dikantor. Yaitu cara Export ke PDF
/ Excel
/ CSV
ataupun langsung print
juga bisa dari Datatables.
Terserah kalian pakai PHP
murni, FW Laravel
dan FW Lainnya bisa kok yang penting kalian menggunakan Datatables
.
Kalau ada yang tanya misal mau export ke excel dan pdf tapi tidak menggunakan Datatables? Berarti kalian harus masuk ke tutor ini :Laravel Datatables Part I
Oke sekarang yang perlu disiapkan yaitu :
- Tabel yang akan dijadikan praktek sudah siap
- Setting datatables nya dengan memanggil
CSS & JS
(online, kalau mau offline tinggal download JS dan CSSnya)
Perlu diingat :
- Tutor kali ini fokus untuk Export & Langsung print saja
- Kalau belum paham bisa lihat diyoutube gilacoding : Youtube Gilacoding
Ini saya sudah siap tabel (saya pake Laravel tapi datanya masih statis belum pake MySQL)
Yang mau latihan, download project nya nanti diakhir.
Setelah data siap, Panggil beberapa JS dan CSS dari kalian download tadi.
Ini Javascriptnya
:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/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.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
Ini CSS
nya :
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">
Langsung buat JS nya seperti ini (langsung copas juga bisa, tapi pelajari ya)
<script type="text/javascript">
$(document).ready(function () {
$('#table-datatables').DataTable({
dom: 'Bfrtip',
buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
});
});
</script>
Pastikan ID pada table-datatables
sama dengan ID pada tabel kalian.
Refresh browser kalian, langsung bisa kan hehe singkat banget ya!
Masih pada Error?
- Pada browser coba buka console nya dengan cara (Chrome : CTRL + SHIFT + I) lihat errornya apa
- Pastikan urutan JS atau CSS sesuai dengan saya diatas
- Mau custom, mau gini, mau fitur lain gimana? Yaa bisa diubek disini nih : https://datatables.net/
- Belum paham juga, bisa lihat video saya sob :
Note : Kalau kalian mau export dengan custom yang lumayan kompleks, cara ini tidak disarankan ya. Mending pakai cara yang saya share sebelumnya disini : Export dengan Laravel
Oke sekian tutorial singkatnya, silahkan email / komen disini / komen diyoutube buat yang mau request, menambahkan, koreksi dan tanya.
Maaf jika terdapat kesalahan kata dan penulisan ya, tunggu tutorial selanjutnya!
Download Projectnya disini : Project disini
Kunjungi juga : @banua.informatika