Skip to content

DataTable: add button export to table with the Bootstrap 4 (bahasa)

Menambahkan button dalam datatable yang menggunakan Bootstrap 4.

Pertama yang dilakukan adalah menginisialisasi dataTable di dalam Java script berikut dan tambahkan opsi ini ke datatable kamu:

buttons: [ 'excel', 'pdf', 'copy' ]

Lebih lengkapnya akan menjadi seperti:

$('#table_kamu').DataTable({
  buttons: [ 'excel', 'pdf', 'copy' ]
});

Kemudian tambahkan file CSS untuk button dan dataTable

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/dataTables.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/buttons/1.3.1/css/buttons.bootstrap4.min.css"/>

Serta menambahkan file Javascript yang diperlukan untuk button dan dataTable

<script type="text/javascript" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.3.1/js/buttons.bootstrap4.min.js"></script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>

Maka hasilnya akan muncul button seperti ini

button_export_datatable

Bila tidak muncul button diatas, cobalah menambahkan opsi

dom: 'Blfrtip',

ke dalam Javascript dimana dataTable kamu di inisialisasikan.

Lebih lengkapnya seperti ini:

$('#table_kamu').DataTable({
  dom: 'Blfrtip',
  buttons: [ 'excel', 'pdf', 'copy' ]
});

Untuk informasi lengkapnya, kamu dapat melihat dokumentasi dari dataTable disini.

Terimakasih dan selamat mencoba.

Avatar

Hi I am Tiko.
Welcome to my Blog. Dapatkan review dan artikel menarik dari komik maupun bacaan untuk mengisi hari mu (entah berguna atau tidak). Tapi tetap jangan lupa Ibadah dan belajar ya adik adik.
Thank Kyu!

No comments yet.

Leave a Reply

Your email address will not be published. Required fields are marked *

SidebarComments (0)