jQuery Datatables 按钮显示为链接.. 不是按钮答案

【问题标题】：jQuery Datatables buttons showing as links.. not buttonsjQuery Datatables 按钮显示为链接.. 不是按钮
【发布时间】：2017-07-28 15:41:25
【问题描述】：

使用jQuery DataTables 1.10.15，我正在尝试使用文件导出选项。

这是我的脚本在页面上的加载方式：

<script src="/Scripts/DataTables/jquery.dataTables.js"></script>
<script src="/Scripts/DataTables/dataTables.bootstrap.js"></script>
<script src="/Scripts/DataTables/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"></script>

这是我的数据表设置：

var table = $('#NewTable').DataTable({
    dom: 'Bfrtip',
    buttons: [ 'excel', 'pdf' ],
    'aoColumnDefs': [
        { "bSortable": false, "aTargets": [2, 7] },
        { "bSearchable": false, "aTargets": [7] }
    ]
});

它们的显示方式如下：

如何让它们显示为按钮而不是链接？

【问题讨论】：

标签： javascript jquery datatable

【解决方案1】：

您很可能缺少正确的 css 文件。

尝试将此 css 链接（来自 CDN）添加到您的标题中。

https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css

工作示例：

var table = $('#NewTable').DataTable({
    dom: 'Bfrtip',
    buttons: [ 'excel', 'pdf' ],
    'aoColumnDefs': [
        { "bSortable": false, "aTargets": [2, 7] },
        { "bSearchable": false, "aTargets": [7] }
    ]
});

<link href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"></script>
<table id="NewTable"></table>

【讨论】：

啊就是这样！