我有一个php/javascript应用程序(Apache 2.4/php8在Windows上)。我正在使用jquery数据表(datatable.net)，并已编码:
dom: 'Brftip',
buttons: ['excel']
在我的应用程序中的几个表。
当我在javascript中动态构建表作为另一个表的选择结果时，这工作得很好。然而，当我在一个表中编写代码，这是建立在我的文档准备函数按钮不显示。下面是$(document).ready()函数的相关部分:
$(document).ready(function () {
$(' #乔布斯)。数据表({
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>";
}
}
}]
});
});
我错过了什么?
在这里，我创建了虚拟响应数据并将其填充到表中，以查看它是否会打印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扩展。