数据表中的按钮和分页显示不正确 [英] Buttons and pagination in datatables is showing incorrectly

问题描述

我正在使用

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

 < link href =/ Vendor / bootstrap / v3.3.6 / css / bootstrap.min.css =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'，
按钮：[
'copy'，'csv'，'excel'，'pdf'，'print'
] ，
栏：[
 {数据：'类别'，标题：'类别'}，
 {数据：'Svp'，标题：'SVP'}，
 {数据：'Rvp'，标题：'RVP'}，
 {数据：'部门'，标题：'部门'}，
 {数据：'ContactType'，标题：'联系人类型'}，
 {data：'TotalRecords'，title：'Total Records'}，
 
] 
 
}）; 
  

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

更新

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

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

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

解决方案

您缺少 dataTables.bootstrap.min.js 脚本文件包含。如果您从官方DataTables 下载页面下载这些文件，其他文件的文件路径可以推断为这个，我看看它是否存在于此处：

 供应商/数据表/ v1.10.12 / js / dataTables.boostrap.min.js 
  

如果不是，你可能不得不回去下载页面，并确保您获得此脚本文件。

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.

这篇关于数据表中的按钮和分页显示不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！