I had use the dataTables jquery without plugin one. The table is work fine with showing data. But if I implemented the file export, the button did not showing or appearing on the table.
Package.vue
this.dataTable = $("#package-rank-table").DataTable({
dom: "lfBrtip",
buttons: [
{
extend: "print",
text: '<i class="fa fa-print"></i>',
titleAttr: "Print",
title: "Redemption Invoice List",
exportOptions: {
columns: [0, 1, 2],
},
},
{
extend: "copyHtml5",
text: '<i class="fa fa-files-o"></i>',
titleAttr: "Copy",
title: " > STOCK List",
exportOptions: {
columns: [0, 1, 2],
},
},
{
extend: "excelHtml5",
text: '<i class="fa fa-file-excel-o"></i>',
titleAttr: "Excel",
title: " > STOCK List",
exportOptions: {
columns: [0, 1, 2],
},
},
{
extend: "csvHtml5",
text: '<i class="fa fa-file-text-o"></i>',
titleAttr: "CSV",
title: " > STOCK List",
exportOptions: {
columns: [0, 1, 2],
},
},
{
extend: "pdfHtml5",
text: '<i class="fa fa-file-pdf-o"></i>',
titleAttr: "PDF",
download: "open",
title: " > STOCK List",
exportOptions: {
columns: [0, 1, 2],
},
},
],
});
This is the html on vue component
<table
class="table table-bordered"
id="package-rank-table"
width="100%"
cellspacing="0"
>
<thead>
<tr>
<th>No</th>
<th>Package Name</th>
<th>Total Package Purchased</th>
</tr>
</thead>
<tfoot>
<tr>
<th>No</th>
<th>Package Name</th>
<th>Total Package Purchased</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
And also this head is to get the link from datatable
<!--Datatable -->
<script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.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.7.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>
I hope can help me solve this problem. Thanks.
