jQuery 用于导出的 DataTables 格式输出，排除按钮
jQuery DataTables format output for export, exclude buttons
对于 jquery 数据 table，我有一个 table 显示在数据 table 的其中一列中，并希望允许用户切换它on/off。导出到 excel/pdf/copy 时它包含所有数据，但它还包含导出期间的按钮。
我想格式化数据以排除切换按钮，因此在导出到 PDF/Excel 时它不会显示。我查看了这个 link 以排除 Salary 的“$”符号。有没有办法让按钮也消失？
<!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>0,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>0,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>,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>
您可以为每个按钮指定列和格式 属性 以实现此目的和进一步的自定义。
列 属性 可以将列的索引作为输出的一部分。
<!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>
const format= {
body: function ( data, row, column, node ) {
// Strip $ from salary column to make it numeric
return column === 5 ?
data.replace( /[$,]/g, '' ) :
data;
}
}
$(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: [
{
extend: 'copyHtml5',
exportOptions: {
columns: [ 0,1,2,3,4,5 ]
,format
}
},
{
extend: 'excelHtml5',
exportOptions: {
columns: [0,1,2,3,4,5],
format
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: [0,1,2,3,4,5],
format
}
}
]
});
});
</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>0,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>0,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>,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>
您可以使用 DataTables buttons.exportData() 函数的 format.body 选项。这使您可以访问要更改的特定列中每个单元格的节点：
exportOptions: {
format: {
body: function ( innerHtml, rowIdx, colIdx, node ) {
if (colIdx === 6) {
return node.textContent.replace('Toggle', '').replace(/ +/g, ' ');
} else {
return innerHtml;
}
}
}
}
关键部分是这部分：
node.textContent.replace('Toggle', '').replace(/ +/g, ' ')
这会获取相关列中的每个 <td> 节点，并从该节点中提取文本内容（即它会去除所有 HTML 标签）。
然后删除文本 Toggle（显示在切换按钮中）。
然后它将多个连续的白色 space 替换为单个白色 space。这最后一步可能不完全是您想要的，因此您可以更改它以在将数据发送到 Excel.
之前以您需要的任何方式格式化数据。
以上代码在更广泛的上下文中是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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">
</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>0,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>0,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>,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>
<script>
$(document).ready(function () {
$('#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: [
{
extend: 'excelHtml5',
title: '', // no title row in excel sheet
text: 'Excel', // label for the export button
exportOptions: {
format: {
body: function ( innerHtml, rowIdx, colIdx, node ) {
if (colIdx === 6) {
return node.textContent.replace('Toggle', '').replace(/ +/g, ' ');
} else {
return innerHtml;
}
}
}
}
}
]
});
});
</script>
</body>
</html>
您可以对响应式扩展执行类似的操作：
https://datatables.net/extensions/responsive/classes
$(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;
}
}
}
};
$('#example').DataTable({
dom: 'Bfrtip',
buttons: ['copy', 'excelHtml5', 'pdf'],
});
});
<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>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.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">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.css" />
<body>
<table id="example" class="display responsive nowrap" style="width:100%">
<thead>
<tr>
<th class="all">Name</th>
<th class="all">Position</th>
<th class="all">Office</th>
<th class="all">Age</th>
<th class="all">Start date</th>
<th class="all">Salary</th>
<th class="none">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>0,800</td>
<td>
<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>0,750</td>
<td>
<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>,000</td>
<td>
<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>
请注意，真正的节点文本是
node.innerText
测试一下你手机里到底有什么
对于 jquery 数据 table，我有一个 table 显示在数据 table 的其中一列中，并希望允许用户切换它on/off。导出到 excel/pdf/copy 时它包含所有数据，但它还包含导出期间的按钮。
我想格式化数据以排除切换按钮，因此在导出到 PDF/Excel 时它不会显示。我查看了这个 link 以排除 Salary 的“$”符号。有没有办法让按钮也消失？
<!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>0,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>0,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>,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>
您可以为每个按钮指定列和格式 属性 以实现此目的和进一步的自定义。 列 属性 可以将列的索引作为输出的一部分。
<!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>
const format= {
body: function ( data, row, column, node ) {
// Strip $ from salary column to make it numeric
return column === 5 ?
data.replace( /[$,]/g, '' ) :
data;
}
}
$(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: [
{
extend: 'copyHtml5',
exportOptions: {
columns: [ 0,1,2,3,4,5 ]
,format
}
},
{
extend: 'excelHtml5',
exportOptions: {
columns: [0,1,2,3,4,5],
format
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: [0,1,2,3,4,5],
format
}
}
]
});
});
</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>0,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>0,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>,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>
您可以使用 DataTables buttons.exportData() 函数的 format.body 选项。这使您可以访问要更改的特定列中每个单元格的节点：
exportOptions: {
format: {
body: function ( innerHtml, rowIdx, colIdx, node ) {
if (colIdx === 6) {
return node.textContent.replace('Toggle', '').replace(/ +/g, ' ');
} else {
return innerHtml;
}
}
}
}
关键部分是这部分：
node.textContent.replace('Toggle', '').replace(/ +/g, ' ')
这会获取相关列中的每个 <td> 节点，并从该节点中提取文本内容（即它会去除所有 HTML 标签）。
然后删除文本 Toggle（显示在切换按钮中）。
然后它将多个连续的白色 space 替换为单个白色 space。这最后一步可能不完全是您想要的，因此您可以更改它以在将数据发送到 Excel.
之前以您需要的任何方式格式化数据。以上代码在更广泛的上下文中是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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">
</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>0,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>0,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>,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>
<script>
$(document).ready(function () {
$('#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: [
{
extend: 'excelHtml5',
title: '', // no title row in excel sheet
text: 'Excel', // label for the export button
exportOptions: {
format: {
body: function ( innerHtml, rowIdx, colIdx, node ) {
if (colIdx === 6) {
return node.textContent.replace('Toggle', '').replace(/ +/g, ' ');
} else {
return innerHtml;
}
}
}
}
}
]
});
});
</script>
</body>
</html>
您可以对响应式扩展执行类似的操作：
https://datatables.net/extensions/responsive/classes
$(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;
}
}
}
};
$('#example').DataTable({
dom: 'Bfrtip',
buttons: ['copy', 'excelHtml5', 'pdf'],
});
});
<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>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.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">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.css" />
<body>
<table id="example" class="display responsive nowrap" style="width:100%">
<thead>
<tr>
<th class="all">Name</th>
<th class="all">Position</th>
<th class="all">Office</th>
<th class="all">Age</th>
<th class="all">Start date</th>
<th class="all">Salary</th>
<th class="none">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>0,800</td>
<td>
<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>0,750</td>
<td>
<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>,000</td>
<td>
<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>
请注意，真正的节点文本是
node.innerText
测试一下你手机里到底有什么