用于导出的 jQuery DataTables 格式输出，排除按钮
[英]jQuery DataTables format output for export, exclude buttons
问题描述
For the jquery data table, I have a table displayed in one of the columns in the Datatable and wanted to enable the user to toggle it on/off.
对于 jquery 数据表，我在 Datatable 的其中一列中显示了一个表，并希望用户能够打开/关闭它。 When exporting to excel/pdf/copy it has all the data, but it also includes the button during export.导出到 excel/pdf/copy 时，它包含所有数据，但在导出期间还包括按钮。
I'm want to format the data to exclude the toggle buttons, so it won't show when exporting to the PDF/Excel.我想格式化数据以排除切换按钮，因此在导出到 PDF/Excel 时不会显示。 I've looked at this link to exclude the '$' signs for Salary.我查看了此链接以排除薪水的“$”符号。 Is there a way I can make the buttons disappear also?有没有办法让按钮也消失？
<!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>
4 个解决方案
解决方案1
1 已采纳 2021-08-13 01:34:39
You can use the format.body option of the DataTablesbuttons.exportData() function.您可以使用 DataTablesbuttons.exportData()函数的format.body选项。 This gives you access to the node of each cell in the specific column you want to change:这使您可以访问要更改的特定列中每个单元格的节点：
exportOptions: {
format: {
body: function ( innerHtml, rowIdx, colIdx, node ) {
if (colIdx === 6) {
return node.textContent.replace('Toggle', '').replace(/ +/g, ' ');
} else {
return innerHtml;
}
}
}
}
The key section is this part:关键部分是这部分：
node.textContent.replace('Toggle', '').replace(/ +/g, ' ')
This takes each <td> node in the relevant column, and extracts the text content from that node (ie it strips out all the HTML tags).这将获取相关列中的每个<td>节点，并从该节点中提取文本内容（即，它会去除所有 HTML 标记）。
Then it removes the text Toggle (which was displayed in the toggle button).然后它会删除文本Toggle （显示在切换按钮中）。
Then it replaces multiple consecutive white spaces with a single white space.然后它用一个空格替换多个连续的空格。 This last step may not be exactly what you want, so you can change it to format the data in whatever way you need, before it is sent to Excel.这最后一步可能不是您想要的，因此您可以在将数据发送到 Excel 之前将其更改为以您需要的任何方式格式化数据。
Here is the above code in its wider context:以下是更广泛上下文中的上述代码：
<!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
0 2021-08-13 00:51:19
You can specify the columns and format property for every button to acheive this & further customization.您可以为每个按钮指定列和格式属性以实现此和进一步的自定义。 The column property can have the index of the columns to be part of the output. 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
0 2021-08-13 01:59:29
You could do something similar with the responsive extension:你可以对响应式扩展做类似的事情：
https://datatables.net/extensions/responsive/classes 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>
解决方案4
0 2022-05-12 08:09:32
just a note the real node text is只是注意真正的节点文本是
node.innerText
to test on it whats really in your cell测试一下你的牢房里到底有什么
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Jquery Datatables Export按钮上是否有回调？ - Are there callbacks on the Jquery Datatables Export buttons?
jQuery数据表以正确的格式导出到Excel - jQuery Datatables export to Excel in correct format
数据表导出按钮未显示， - Datatables export buttons not showing,
jQuery Datatables Export Buttons动态文件名和标题 - jQuery Datatables Export Buttons Dynamic file name and title
数据表更改导出格式 - Datatables change Export format
DataTables TableTools导出按钮不起作用 - DataTables TableTools export buttons not working
向数据表添加按钮-Jquery - Adding Buttons to Datatables - Jquery
jQuery 数据表响应式按钮 - jQuery datatables responsive buttons
如何使用导出按钮对数据表中的按钮进行分组？ - How to group buttons in datatables with export buttons?
如何在数据表中添加数据导出按钮 - How to add data export buttons in datatables
相关标签