Question

我使用这段代码生成了包含一些数据的数据表来初始化数据表

$("#myid").DataTable(
            {
                    columnDefs:
                    [
                      { orderable: false, targets: -1}
                    ],
              "pageLength":10
            });

我已经看到了在数据表中添加按钮的文档。但是当我尝试与我所做的事情合并时，它没有显示文档中显示的导出按钮。

我做了什么

$("#myid").DataTable(
            {
                    columnDefs:
                    [
                      { orderable: false, targets: -1}
                    ],
              "pageLength":10,
              "dom": 'Bfrtip',
              "buttons": [
                    'excelHtml5',
                ]
            });

还有什么我想念的。感谢任何帮助。谢谢..

Answer 1

确保您已在html页面中导入了数据表按钮扩展JS文件。

查看此官方链接 - https://datatables.net/extensions/buttons/

然后您可以使用以下代码：

$('#myTable').DataTable( {
    buttons: [
        'copy', 'excel', 'pdf'
    ]
} );

要使用HTML5导出按钮，您需要导入JSZip和PDFMake

按钮的CDN是：

JS - https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js

CSS - https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css

以下是我的一个html页面的片段，该页面使用DataTable和Buttons进行导出：

<script type="text/javascript" src="assets/js/plugins/tables/datatables/datatables.min.js"></script>
        <script type="text/javascript" src="assets/js/plugins/tables/datatables/extensions/col_reorder.min.js"></script>
        <script type="text/javascript" src="assets/js/plugins/tables/datatables/extensions/buttons.min.js"></script>
        <script type="text/javascript" src="assets/js/plugins/tables/datatables/extensions/jszip/jszip.min.js"></script>
        <script type="text/javascript" src="assets/js/plugins/tables/datatables/extensions/pdfmake/pdfmake.min.js"></script>

如何在数据表中添加数据导出按钮

1 个答案: