如何导出嵌套数据表



我正在使用jQuery DataTables。下面是它的代码。我知道如何导出DataTable,但如何导出一行中的嵌套子表?我不知道如何做到这一点。有没有一种方法可以使用jQuery DataTables来实现这一点,或者有没有其他易于使用的库?

如果DataTables不支持子表,我可以使用任何其他库吗?

function divexpandcollapse(courseSessionid) {
if (
$("#lnkCourseSessionDetails" + courseSessionid)
.html()
.trim() === "Expand +"
) {
$("#lnkCourseSessionDetails" + courseSessionid)
.closest("tr")
.addClass("left-bordered-3 right-bordered-3 top-bordered-3");
$("#lnkCourseSessionDetails" + courseSessionid)
.closest("tr")
.after(
"<tr class='left-bordered-3 right-bordered-3 bottom-bordered-3 subtableRow'><div><td  colspan = '100%'>" +
$("#lnkCourseSessionDetails" + courseSessionid)
.next()
.html() +
"</td></div></tr>"
);
$("#lnkCourseSessionDetails" + courseSessionid).html(" Collapse - ");
} else if (
$("#lnkCourseSessionDetails" + courseSessionid)
.html()
.trim() === "Collapse -"
) {
$("#lnkCourseSessionDetails" + courseSessionid)
.closest("tr")
.removeClass("left-bordered-3 right-bordered-3 top-bordered-3");
$("#lnkCourseSessionDetails" + courseSessionid)
.closest("tr")
.next()
.remove();
$("#lnkCourseSessionDetails" + courseSessionid).html(" Expand + ");
} else if (
$("#lnkCourseSessionDetails" + courseSessionid)
.html()
.trim() === "Afficher +"
) {
$("#lnkCourseSessionDetails" + courseSessionid)
.closest("tr")
.addClass("left-bordered-3 right-bordered-3 top-bordered-3");
$("#lnkCourseSessionDetails" + courseSessionid)
.closest("tr")
.after(
"<tr class='left-bordered-3 right-bordered-3 bottom-bordered-3 subtableRow'><div><td colspan = '100%'>" +
$("#lnkCourseSessionDetails" + courseSessionid)
.next()
.html() +
"</td></div></tr>"
);
$("#lnkCourseSessionDetails" + courseSessionid).html(" Cacher - ");
} else if (
$("#lnkCourseSessionDetails" + courseSessionid)
.html()
.trim() === "Cacher -"
) {
$("#lnkCourseSessionDetails" + courseSessionid)
.closest("tr")
.removeClass("left-bordered-3 right-bordered-3 top-bordered-3");
$("#lnkCourseSessionDetails" + courseSessionid)
.closest("tr")
.next()
.remove();
$("#lnkCourseSessionDetails" + courseSessionid).html(" Afficher + ");
}
$("td:has(>div:has(>table.subtable))").css("padding-left", "0");
}
$('#ContentContainer_MainContent_gvTransaction').DataTable({
dom: 'Bfrtip',
buttons: [
"excelHtml5"
]
});
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
</head>
<body>
<table id="ContentContainer_MainContent_gvTransaction">
<thead>
<tr>
<th scope="col" class="sorting_disabled" rowspan="1" colspan="1" style="width: 145px;">Order Details</th>
<th scope="col" class="sorting_disabled" rowspan="1" colspan="1" style="width: 101px;">Date</th>
<th scope="col" class="sorting_disabled" rowspan="1" colspan="1" style="width: 157px;">Order Amount</th>
<th scope="col" class="sorting_disabled" rowspan="1" colspan="1" style="width: 169px;">Purchase Order</th>
<th scope="col" class="sorting_disabled" rowspan="1" colspan="1" style="width: 160px;">Order Number</th>
<th scope="col" class="sorting_disabled" rowspan="1" colspan="1" style="width: 195px;">Transaction Status</th>
</tr>
</thead>
<tbody>
<tr class="left-bordered-3 right-bordered-3 top-bordered-3 odd">
<td class="EntireRow">
<a id="lnkCourseSessionDetails5cef3869-d01c-ed11-b83e-000d3af4e40a" class="lnkOrderDetails" href="JavaScript:divexpandcollapse('5cef3869-d01c-ed11-b83e-000d3af4e40a');"> Expand + </a>
<div id="ContentContainer_MainContent_gvTransaction_pnlOrders_0" style="display: none">
<div>
<table class="table table-responsive subtable" cellspacing="0" id="ContentContainer_MainContent_gvTransaction_gvCoursePaymentTransaction_0" style="border-collapse:collapse;">
<thead>
<tr>
<th scope="col">&nbsp;</th>
<th scope="col">Course Number</th>
<th scope="col">End Date</th>
<th scope="col">TP Reference Number</th>
<th scope="col">Participants</th>
<th scope="col">Submitted</th>
<th scope="col">Course Cost</th>
<th scope="col">Subtotal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hidden-xs"><input type="hidden" name="ctl00$ctl00$ContentContainer$MainContent$gvTransaction$ctl02$gvCoursePaymentTransaction$ctl02$IDVal" id="ContentContainer_MainContent_gvTransaction_gvCoursePaymentTransaction_0_IDVal_0" value="9d1357ec-8283-ec11-8d20-0022486dddc2"></td>
<td><a href="../CourseManagement/SessionParticipantsandInstructors/?id=ee8d0589-0df6-eb11-94ef-000d3a09e7f6" target="_blank">1287207</a></td>
<td>2021-08-18</td>
<td></td>
<td>2</td>
<td>No</td>
<td>$10.00</td>
<td>$20.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
<td class=" BackgroundGray">2022-08-15</td>
<td>$20.00</td>
<td></td>
<td></td>
<td>Cancelled</td>
</tr>
</tbody>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
</body>

由于DataTables不支持子导出,我必须创建一个包含所有行的隐藏表,并导出该表,而不是视图中显示的表。

最新更新