数据表中的按钮和分页显示不正确

Question

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

Answer 1

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.