- Daftar
- 4 Oct 1988
- Post
- ★
- Like diterima
- 9.162
subcribe - like dan coment sob :
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.
Oke sekarang yang perlu disiapkan yaitu :
Setelah data siap, Panggil beberapa JS dan CSS dari kalian download tadi.
Ini Javascriptnya :
Ini CSSnya :
Langsung buat JS nya seperti ini (langsung copas juga bisa, tapi pelajari ya)
Pastikan ID pada
Refresh browser kalian, langsung bisa kan hehe singkat banget ya!
Masih pada Error?
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.
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)
- Tutor kali ini fokus untuk Export & Langsung print saja
Setelah data siap, Panggil beberapa JS dan CSS dari kalian download tadi.
Ini Javascriptnya :
JavaScript:
<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 CSSnya :
CSS:
<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)
JavaScript:
<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/
Terakhir diubah: