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

Posted

技术标签:

【中文标题】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',。 【参考方案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" >
  <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 扩展名。

【讨论】：

以上是关于jquery datatables 按钮：['excel'] 在 document.ready() 中构建表格时不起作用，但在动态构建表格时起作用的主要内容，如果未能解决你的问题，请参考以下文章

使用jQuery DataTable Buttons插件不显示导出按钮

如何删除 dataTables 按钮的默认按钮类？

DataTables Jquery File Export 没有显示按钮

用于导出的 jQuery DataTables 格式输出，排除按钮

将单击功能添加到 Jquery DataTable 中的两个按钮

Jquery Datatable 分页按钮样式修复