DataTables Jquery File Export 没有显示按钮

Posted 2023-05-07

【中文标题】DataTables Jquery File Export 没有显示按钮

【英文标题】：DataTables Jquery File Export did not show the button

【发布时间】：2021-09-22 11:10:06

【问题描述】：

我使用了没有插件一的 dataTables jquery。该表可以正常显示数据。但是如果我实现了文件导出，按钮没有显示或出现在表格上。

包.vue

         this.dataTable = $("#package-rank-table").DataTable(
            dom: "lfBrtip",
            buttons: [
              
                extend: "print",
                text: '<i class="fa fa-print"></i>',
                titleAttr: "Print",
                title: "Redemption Invoice List",
                exportOptions: 
                  columns: [0, 1, 2],
                ,
              ,
              
                extend: "copyhtml5",
                text: '<i class="fa fa-files-o"></i>',
                titleAttr: "Copy",
                title: " > STOCK List",
                exportOptions: 
                  columns: [0, 1, 2],
                ,
              ,
              
                extend: "excelHtml5",
                text: '<i class="fa fa-file-excel-o"></i>',
                titleAttr: "Excel",
                title: " > STOCK List",
                exportOptions: 
                  columns: [0, 1, 2],
                ,
              ,
              
                extend: "csvHtml5",
                text: '<i class="fa fa-file-text-o"></i>',
                titleAttr: "CSV",
                title: " > STOCK List",
                exportOptions: 
                  columns: [0, 1, 2],
                ,
              ,
              
                extend: "pdfHtml5",
                text: '<i class="fa fa-file-pdf-o"></i>',
                titleAttr: "PDF",
                download: "open",
                title: " > STOCK List",
                exportOptions: 
                  columns: [0, 1, 2],
                ,
              ,
            ],
          );

这是 vue 组件上的 html

            <table
              class="table table-bordered"
              id="package-rank-table"
              
              cellspacing="0"
            >
              <thead>
                <tr>
                  <th>No</th>
                  <th>Package Name</th>
                  <th>Total Package Purchased</th>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <th>No</th>
                  <th>Package Name</th>
                  <th>Total Package Purchased</th>
                </tr>
              </tfoot>
              <tbody>
              </tbody>
              </table>

这个头也是从数据表中获取链接

    <!--Datatable -->
    <script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>


    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>

希望能帮我解决这个问题。谢谢。

【问题讨论】：

显示你的控制台错误一些 jquery 冲突所以按钮不显示

这能回答你的问题吗？ dataTables Export to Excel button is not showing

【参考方案1】：

在页脚中添加这些 javascript 文件，在页眉中添加样式链接，然后您的问题将得到解决。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">

<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>

【讨论】：

Nvm，我解决了。基本上我把那些脚本放错了地方。需要放入体内。非常感谢。