【发布时间】：2021-10-16 07:16:15
【问题描述】：
对于 jquery 数据表，我在 Datatable 的其中一列中显示了一个表，并希望用户能够打开/关闭它。导出到 excel/pdf/copy 时，它包含所有数据，但在导出过程中还包括按钮。
我想格式化数据以排除切换按钮，因此在导出到 PDF/Excel 时不会显示。我查看了link 以排除薪水的“$”符号。有没有办法让按钮也消失？
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">
<script>
$(document).ready(function () {
var buttonCommon = {
exportOptions: {
format: {
body: function (data, row, column, node) {
// Strip $ from salary column to make it numeric
return column === 5 ?
data.replace(/[$,]/g, '') :
data;
}
}
}
};
$('#togg-tb1').click(function () {
if ($("#table1").css("display") == "none") {
$("#table1").css("display", "table-cell");
} else {
$("#table1").css("display", "none");
}
});
$('#togg-tb2').click(function () {
if ($("#table2").css("display") == "none") {
$("#table2").css("display", "table-cell");
} else {
$("#table2").css("display", "none");
}
});
$('#togg-tb3').click(function () {
if ($("#table3").css("display") == "none") {
$("#table3").css("display", "table-cell");
} else {
$("#table3").css("display", "none");
}
});
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf'
]
});
});
</script>
</head>
<body>
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Toggling</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>
<button type="button" id="togg-tb1">Toggle</button>
<table id="table1">
<tr>
<td>Yo Hello</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>
<button type="button" id="togg-tb2">Toggle</button>
<table id="table2">
<tr>
<td>Yo Hello</td>
</tr>
<tr>
<td>Yo Hello</td>
</tr>
<tr>
<td>Yo Hello</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>
<button type="button" id="togg-tb3">Toggle</button>
<table id="table3">
<tr>
<td>Yo Hello</td>
</tr>
<tr>
<td>Yo Hello</td>
</tr>
<tr>
<td>Yo Hello</td>
</tr>
<tr>
<td>Yo Hello</td>
</tr>
<tr>
<td>Yo Hello</td>
</tr>
<tr>
<td>Yo Hello</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>【问题讨论】：
标签： javascript html jquery datatables export