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

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 进行导出:

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