如何解决如何使用jQuery DataTables将嵌套表“ td”内的数据组导出到Excel?
我真的很想将嵌套表作为CSV文件导出到Excel。如何使用DataTables将嵌套表数据导出到Excel?我在下面给出了我的代码。
我想要如下输出
$(document).ready(function() {
var myData = [{
employee: "Bob Smith",project: "Project",role: "Leader",itemno: "ABCDF",amount: "$50.00",jobtitle: "Software Engineer"
},{
employee: "Tom Peterson",project: "Project1",role: "Assistant",itemno: "ABCDEFG",amount: "$40.00",jobtitle: "Business Analyst"
}];
var myColumns = [{
title: "Employee",data: "employee"
},{
title: "<table class='table table-bordered table-sm'><thead><tr><td>Item Details</td><td>Amount</td></tr></thead></table>",data: null,render: function(data,type,row,meta) {
var subtableHtml = "<table class='table table-bordered table-sm'>";
subtableHtml += "<tbody>"
subtableHtml += "<tr>";
subtableHtml += "<td>" + data.project + "</br>" + data.role + "</br>" + data.itemno + "</td>";
subtableHtml += "<td>" + data.amount + "</td>";
subtableHtml += "</tr>";
subtableHtml += "</tbody></table>";
return subtableHtml;
}
},{
title: "Designation",data: "jobtitle"
},];
$('#dataTable').dataTable({
searching: false,paging: false,data: myData,columns: myColumns,dom: "<'row'<'col-sm-12 col-md-4 col-lg-4 col-xs-12'l><'col-sm-12 col-md-4 col-lg-4 col-xs-12 text-center'B><'col-sm-12 col-md-4 col-lg-4 col-xs-12'f>>" +
"<'row'<'col-sm-12 col-md-12 col-lg-12 col-xs-12'tr>>" +
"<'row'<'col-sm-12 col-md-12 col-lg-5 col-xs-12'i><'col-sm-12 col-md-12 col-lg-7 col-xs-12 text-center'p>>",buttons: [{
extend: 'excel',text: '<a href="#" class="aExcel"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Microsoft_Excel_2013_logo.svg/1043px-Microsoft_Excel_2013_logo.svg.png" style="width:25px;height:25px" class="imgExcel" alt="Excel"/></a>',tag: 'span',title: '',init: function(api,node,config) {
$(node).removeClass('btn btn-default btn-secondary buttons-excel buttons-html5')
},exportOptions: {
columns: [0,1,2]
},}]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.flash.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.6.4/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.print.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<h3>Nested Table Export to Excel :</h3>
<table id="dataTable" class="table table-sm table-bordered" style="width:100%"></table>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。