jquery datatables 按钮：['excel'] 在 document.ready() 中构建表格时不起作用，但在动态构建表格时起作用答案

【问题标题】：jquery datatables buttons: ['excel'] does not work when table is built in document.ready() but does when the table is built dynamicallyjquery datatables 按钮：['excel'] 在 document.ready() 中构建表格时不起作用，但在动态构建表格时起作用
【发布时间】：2021-12-14 01:43:57
【问题描述】：

我有一个 php/javascript 应用程序（Windows 上的 Apache 2.4 / php8）。我正在使用 jquery DataTables (datatables.net) 并进行了编码：

dom: 'Brftip',
buttons: ['excel']

我的应用程序中的几个表。

当我在 javascript 中作为在另一个表中选择的结果动态构建表时，这非常有用。但是，当我在我的文档就绪功能中内置的表格中编写该按钮时，该按钮不会显示。下面是我的 $(document).ready() 函数的相关部分：

$(document).ready(function () {

$('#jobs').DataTable({

    dom: 'Bfrtip',
    buttons: ['excel'],

    select: {
        sytle: 'single',
        items: 'row'
    },

    ajax: {
        url: "php/joblist.php",
        type: "POST",
        dataSrc: "",

        data: function (d) {
            var activeOnlyCheckbox = document.getElementById("activeOnly");
            if (activeOnlyCheckbox.checked) {
                return JSON.stringify({activeOnly: 'yes'});
            } else {
                return JSON.stringify({activeOnly: 'no'});
            }
        }
    },

    paging: false,
    scrollY: '60vh',
    scrollCollapse: true,

    columns: [
        {data: "JOB_ID"},
        {data: "LAST_START"},
        {data: "LAST_FINISH"},
        {data: "LAST_STATUS"}

    ],

    "columnDefs": [{
            "targets": 3,
            "data": "LAST_STATUS",
            "render": function (data, type, row, meta) {
                if (screen.width > 1500) {
                    return "<div class='text-wrap status-column'>" + data + "</div>";
                } else {
                    return "<div class='text-wrap status-column'>" + data + "</div>";
                }
            }
        }]
});
});

我错过了什么？

【问题讨论】：

可能不是答案，但请注意，您有一个错字：sytle: 'single',。应该是style: 'single',。

标签： javascript jquery datatables

【解决方案1】：

在这里，我创建了虚拟响应数据并将其填充到表中，以查看它是否会打印一个 excel 文件，它工作得很好。

var data = [
{"JOB_ID": "1",
"LAST_START": "Random Data",
"LAST_FINISH": "More Random Data",
"LAST_STATUS": "Last one"}
]

$(document).ready(function() {
    var table = $('#myTable').DataTable({ 
    data: data,
    paging: false,
    scrollY: '60vh',
    scrollCollapse: true,
        select: {
        sytle: 'single',
        items: 'row'
    },

    ajax: {
        url: "php/joblist.php",
        type: "POST",
        dataSrc: "",

        data: function (d) {
            var activeOnlyCheckbox = document.getElementById("activeOnly");
            if (activeOnlyCheckbox.checked) {
                return JSON.stringify({activeOnly: 'yes'});
            } else {
                return JSON.stringify({activeOnly: 'no'});
            }
        }
    },
    columns: [
        {data: "JOB_ID"},
        {data: "LAST_START"},
        {data: "LAST_FINISH"},
        {data: "LAST_STATUS"}

    ],

    "columnDefs": [{
            "targets": 3,
            "data": "LAST_STATUS",
            "render": function (data, type, row, meta) {
                if (screen.width > 1500) {
                    return "<div class='text-wrap status-column'>" + data + "</div>";
                } else {
                    return "<div class='text-wrap status-column'>" + data + "</div>";
                }
            }
        }],
        dom: '<"toolbar"><"right"B>rt',
        buttons: ['excel'],
        order: [
            [0, 'asc']
        ]
        
    });

});

<head>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css"/>
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
</head>

<table id="myTable" class="table table-bordered" cellspacing="0" width="100%">
  <thead class="table-dark">
    <tr>
      <th>Job ID</th>
      <th>Last Start</th>
      <th>Last Finish</th>
      <th>Last Status</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

确保您为表格添加了正确的扩展名。为了使excel按钮/导出工作。您需要拥有 Buttons 和 HTML5 Export 扩展名。

【讨论】：