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

Question

我使用Datatables 来显示报告和记录。但是我遇到了一个问题，文件导出按钮和底部的分页仅显示为链接而不是按钮。

这是我的屏幕截图

这是我在页面中加载的内容

<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>

注意，我只想使用引导样式的数据表。

这是我用来设置数据表的代码。

        $('#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' },

            ]

        });

我在这里缺少什么？我该如何解决这个问题

更新

我修复了导出按钮，但包括以下文件

Vendor/datatables/v1.10.12/extensions/Buttons/js/buttons.bootstrap.min.js

现在唯一开放的问题是底部的页面

Answer 1

您缺少 dataTables.bootstrap.min.js 脚本文件包含。如果你从官方DataTables download page下载了这些文件，并且其他文件的文件路径可以推断到这个，我会看看它是否存在：

Vendor/datatables/v1.10.12/js/dataTables.boostrap.min.js

如果没有，您可能需要返回下载页面并确保您获得了此脚本文件。