I am using to use Datatables to display reports and records. But I am having an issue where the file export buttons and the pagination at the bottom are only showing as links not as buttons.
Here is a screenshot of my screen
This is what I have loaded in my page
<link href="/Vendor/bootstrap/v3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="/Vendor/bootstrap/v3.3.6/js/bootstrap.min.js"></script>
<link href="/Vendor/datatables/v1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<script src="/Vendor/datatables/v1.10.12/js/jquery.dataTables.min.js"></script>
<link href="/Vendor/datatables/v1.10.12/extensions/Buttons/css/buttons.bootstrap.min.css" rel="stylesheet"/>
<script src="/Vendor/datatables/v1.10.12/extensions/Buttons/js/dataTables.buttons.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/Buttons/js/buttons.flash.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/JSZip/jszip.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/pdfmake/build/pdfmake.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/pdfmake/build/vfs_fonts.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/Buttons/js/buttons.html5.min.js"></script>
<script src="/Vendor/datatables/v1.10.12/extensions/Buttons/js/buttons.print.min.js"></script>
Note, that I only want to use the datatable with bootstrap style.
Here is the code that I use to setup the datatable.
$('#reportTable').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
columns: [
{ data: 'Category', title: 'Category' },
{ data: 'Svp', title: 'SVP' },
{ data: 'Rvp', title: 'RVP' },
{ data: 'Division', title: 'Division' },
{ data: 'ContactType', title: 'Contact Type' },
{ data: 'TotalRecords', title: 'Total Records' },
]
});
What am I missing here? How can I fix this issue
UPDATED
I fixed the Export buttons but including the following file
Vendor/datatables/v1.10.12/extensions/Buttons/js/buttons.bootstrap.min.js
The only open issue now is the pages at the bottom
You are missing the dataTables.bootstrap.min.js
script file include. If you downloaded these files from the official DataTables download page and the file path of the other files can be extrapolated to this one, I'd take a look and see if it exists here:
Vendor/datatables/v1.10.12/js/dataTables.boostrap.min.js
If it doesn't you may have to go back to the download page and make sure you get this script file.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.