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.