jquery - 数据表不导出页脚中的第二行
问题描述
我有这个数据表问题,我无法在 excel 中导出第二行页脚。下面是片段。当我导出页脚 1 时,页脚 1 存在于工作表中,但页脚 2 不存在。
$(document).ready( function () {
$('#table').DataTable({
dom: 'Bfrtip',
buttons: [
{ extend: 'excelHtml5', footer: true },
]
});
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="table">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Footer 1</th>
<th>Footer 1</th>
<th>Footer 1</th>
</tr>
<tr>
<th>Footer 2</th>
<th>Footer 2</th>
<th>Footer 2</th>
</tr>
</tfoot>
</table>
解决方案
不幸DataTables
的是不支持多行表格页脚,但是有一个自定义功能可以自定义 XLSX 文件:
customize
自:1.2.0
此方法可用于修改 Buttons 创建的 XLSX 文件。传入的第一个参数是一个包含 XML 文件的对象,并且对象结构与 XLSX 文件中这些文件的文件系统路径相匹配。XLSX 文件的自定义是一个复杂的主题 - 请参阅文档中的自定义 部分以
excelHtml5 button
获取完整详细信息。从 Buttons 1.5.2 开始,此函数被传递三个参数:
- Excel 使用的 ZIP 文件结构中包含 XML 文件的对象
- 按钮配置对象
- 按钮所属表的 DataTables API 实例。
我们可以利用customize
回调并将其与读取表页脚相结合,然后使用 jQuery 将额外的页脚行添加到 XML XLS:
$(document).ready( function () {
$('#table').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
footer: true,
customize: (xlsx, config, dataTable) => {
let sheet = xlsx.xl.worksheets['sheet1.xml'];
let footerIndex = $('sheetData row', sheet).length;
let $footerRows = $('tr', dataTable.footer());
// If there are more than one footer rows
if ($footerRows.length > 1) {
// First header row is already present, so we start from the second row (i = 1)
for (let i = 1; i < $footerRows.length; i++) {
// Get the current footer row
let $footerRow = $footerRows[i];
// Get footer row columns
let $footerRowCols = $('th', $footerRow);
// Increment the last row index
footerIndex++;
// Create the new header row XML using footerIndex and append it at sheetData
$('sheetData', sheet).append(`
<row r="${footerIndex}">
${$footerRowCols.map((index, el) => `
<c t="inlineStr" r="${String.fromCharCode(65 + index)}${footerIndex}" s="2">
<is>
<t xml:space="preserve">${$(el).text()}</t>
</is>
</c>
`).get().join('')}
</row>
`);
}
}
}
}
]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="table">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Footer 1</th>
<th>Footer 1</th>
<th>Footer 1</th>
</tr>
<tr>
<th>Footer 2</th>
<th>Footer 2</th>
<th>Footer 2</th>
</tr>
<tr>
<th>Footer 3</th>
<th>Footer 3</th>
<th>Footer 3</th>
</tr>
</tfoot>
</table>
推荐阅读
- cassandra - 在 cassandra / CQL 上构建数据模型
- c# - 我无法从 xamarin 发送请求,但我可以从 WPF 应用程序发送请求
- reactjs - 从 firstore 集合 React 中获取带有 ID 的文档
- python - 尝试将文本文件转换为数据结构
- javascript - 如何根据另一个道具的类型键入对象的道具?
- asp.net - 在 C# 中使用 Web 应用程序保存文档时出错
- javascript - 每次传递新数组时都需要卸载(重新初始化)先前存在的 Howl (Howlerjs)
- java - java流:找到相邻值匹配的最简单方法
- jmeter - JMeter - Api GET 请求 - 响应说:没有已知的方式来呈现数据,虽然状态码是 200
- scala - 如何在 scala 中生成所有列表组合?