用于导出的 jQuery DataTables 格式输出，排除按钮
Posted
技术标签:
【中文标题】用于导出的 jQuery DataTables 格式输出，排除按钮【英文标题】：jQuery DataTables format output for export, exclude buttons 【发布时间】：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>【问题讨论】：
【参考方案1】：您可以使用 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（显示在切换按钮中）。
然后它用一个空格替换多个连续的空格。最后一步可能不是您想要的，因此您可以在将数据发送到 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>$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>
<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>
【讨论】：
【参考方案2】：您可以为每个按钮指定列和格式属性以实现此和进一步的自定义。 column 属性可以将列的索引作为输出的一部分。
<!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>$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>【讨论】：
我想将数据保留在导出的列中，我只是不想在导出时包含“切换”【参考方案3】：你可以用响应式扩展做类似的事情：
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>$320,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>$170,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>$86,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>【讨论】：
以上是关于用于导出的 jQuery DataTables 格式输出，排除按钮的主要内容，如果未能解决你的问题，请参考以下文章
jQuery DataTables TableTools Export - 获取复选框或单选项目的值
如何在 jQuery 导出时将 dataTables 中的所有 tableHeader 值更改为大写
JQuery Datatables 表格工具，删除 PDF 导出