如何将子行添加到数据表中的子行
[英]How to add a sub-row to a child row in Datatables
问题描述
我想在 Datatables 的帮助下创建的表上的辅助行中添加一个新的子级别，这次我想为我的辅助行生成一个新的子级，我附上了一个我想解释的示例和我从 Datatables 中找到了我想要得到的东西，我只是对这里使用的语法和我在当前代码中使用的语法有点困惑。
我附上了 Javascript 代码，我用它来构建带有单个子行的 Datatable：
/* Formatting function for row details - modify as you need */
function format1(d) {
// `d` is the original data object for the row
console.log(d);
let tabla = `<table cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
<thead>
<tr>
<th>
Date
</th>
<th>
No. Consecutivo
</th>
</tr>
</thead>
<tbody>`;
d.Consecutivo.forEach(f => {
tabla += `<tr>
<td>${f.Date}</td>
<td>${f.Consecutivo}</td>
</tr>`;
});
tabla += '</tbody></table>';
return tabla;
}
$(document).ready(function () {
$('#example').dataTable( {
responsive : true,
ajax : {
"type": 'POST',
"url" : './test.php',
"dataType": 'JSON',
"cache": false,
"data": {
'param' : 1,
},
},
columns: [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data" : "PurchaseOrder" },
{ "data" : "DatePurchaseOrder" },
{ "data" : "Total"},
{ "data" : "Currency" },
{ "data" : "Status" },
],
order : [[1, 'desc']],
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = $('#example').DataTable().row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format1(row.data())).show();
tr.addClass('shown');
}
});
});
如果有人可以就这个主题给我一些指导，我将不胜感激。
更新1：
看到有些人对我的问题的目的有些困惑，我不厌其烦地用手做了一个小例子，说明我想了解的内容。
我再解释一下， PurchaseOrder所在的header是父行， Consecutivo header是父PurchaseOrder行的子行， Date Z099FB995346F31C749EcutivoE40DB的子行是Consecutivo
更新 2：
在搜索和搜索文档之间，我遇到了另一个示例，但它仍然没有给我一个更清晰的想法，我不知道是否有必要修改我正在使用的代码并使其适应我在示例或我正在使用的代码。 我计划的可以完成。
更新 3：
进一步改进代码，我已经到了可以找到展开第二个子行的按钮的地步，但是当点击它时，它并没有展开。 我附上了一个例子并分享了已经稍微改进的代码：
首先在format1() function 中，我只是创建表并将其作为 jQuery 数组返回。
当我操作“子行”（子表）时，我会在显示时填充并激活 DataTable 并在隐藏时销毁。
/* Formatting function for row details - modify as you need */
function format1(d) {
// `d` is the original data object for the row
console.log(d);
let tabla = `<table id="tb-${d.PurchaseOrder}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
<thead>
<tr>
<th>
No. Consecutivo
</th>
<th>
Date
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>`;
return $(tabla).toArray();
}
$(document).ready(function () {
$('#example').dataTable( {
responsive : true,
ajax : {
"type": 'POST',
"url" : './test.php',
"dataType": 'JSON',
"cache": false,
"data": {
'param' : 1,
},
},
columns: [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data" : "PurchaseOrder" },
{ "data" : "DatePurchaseOrder" },
{ "data" : "Total"},
{ "data" : "Currency" },
{ "data" : "Status" },
],
order : [[1, 'desc']],
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
let tr = $(this).closest('tr');
let row = $('#example').DataTable().row(tr);
let rowData = row.data();
let tbId = `#tb-${rowData.PurchaseOrder}`;
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
$(tbId).DataTable().destroy();
}
else {
// Open this row
row.child(format1(rowData)).show();
$(tbId).DataTable({
data: rowData.Consecutivo,
"searching": false,
"bPaginate": false,
"info" : false,
columns: [
{
"className": 'details-control1',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ data: 'Consecutivo' },
{ data: 'Date' },
],
});
$(tbId).on('click', 'td.details-control', function(){
var tr = $(this).closest('tr');
var row = $('#example').DataTable().row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format1(row.data())).show();
tr.addClass('shown');
}
});
tr.addClass('shown');
}
});
如您所见，我仍然无法将Date定位为No. Consecutivo的女儿，正如我在之前对该问题的更新中所解释的那样。
更新 4：
正如一些评论所说，我在这里添加了数据源以及 html 和 css。
/* Formatting function for row details - modify as you need */ function format1(d) { // `d` is the original data object for the row console.log(d); let tabla = `<table id="tb-${d.PurchaseOrder}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;"> <thead> <tr> <th> No. Consecutivo </th> <th> Date </th> </tr> </thead> <tbody> </tbody> </table>`; return $(tabla).toArray(); } $(document).ready(function () { $('#example').dataTable( { responsive: true, ajax: { "type": 'POST', "url": './test.php', "dataType": 'JSON', "cache": false, "data": "data": [ [ "789", "28/04/2021", "$100", "USD", "Delivered" ], [ "790", "27/04/2021", "$100", "USD", "In wait" ], [ "791", "28/04/2021", "$100", "USD", "Delivered" ], [ "792", "28/04/2021", "$100", "USD", "Delivered" ], ] }, columns: [ { "className": 'details-control', "orderable": false, "data": null, "defaultContent": '' }, { "data": "PurchaseOrder" }, { "data": "DatePurchaseOrder" }, { "data": "Total"}, { "data": "Currency" }, { "data": "Status" }, ], order: [[1, 'desc']], } ); // Add event listener for opening and closing details $('#example tbody').on('click', 'td.details-control', function () { let tr = $(this).closest('tr'); let row = $('#example').DataTable().row(tr); let rowData = row.data(); let tbId = `#tb-${rowData.PurchaseOrder}`; if (row.child.isShown()) { // This row is already open - close it row.child.hide(); tr.removeClass('shown'); $(tbId).DataTable().destroy(); } else { // Open this row row.child(format1(rowData)).show(); $(tbId).DataTable({ data: rowData.Consecutivo, "searching": false, "bPaginate": false, "info": false, columns: [ { "className": 'details-control1', "orderable": false, "data": null, "defaultContent": '' }, { data: 'Consecutivo' }, { data: 'Date' }, ], }); $(tbId).on('click', 'td.details-control', function(){ var tr = $(this).closest('tr'); var row = $('#example').DataTable().row(tr); if (row.child.isShown()) { // This row is already open - close it row.child.hide(); tr.removeClass('shown'); } else { // Open this row row.child(format1(row.data())).show(); tr.addClass('shown'); } }); tr.addClass('shown'); } });
td.details-control { background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center; cursor: pointer; width: 30px; transition: .5s; } tr.shown td.details-control { background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center; width: 30px; transition: .5s; }
<link href="https://cdn.datatables.net/buttons/1.5.4/css/buttons.dataTables.min.css" rel="stylesheet"/> <link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css" rel="stylesheet"/> <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <section class="content"> <div class="row"> <div class="col-xs-12"> <div class="box"> <div class="box-header"> <h3 class="box-title"></h3> </div> <div id="box-body" style="padding: 0px 10px 10px 10px;"> <table id="example" class="table table-bordered table-hover"> <thead> <tr> <th></th> <th>PurchaseOrder</th> <th>DatePurchaseOrder</th> <th>Total</th> <th>Currency</th> <th>Status</th> </tr> </thead> </table> </div> </div> </div> </div>
更新 5：
在 ajax 调用中，我使用以下语句，其中我使用console.log通过 ajax 获取响应
$(document).ready(function () {
$('#example').dataTable( {
responsive : true,
ajax : {
"type": 'POST',
"url" : './test.php',
"dataType": 'JSON',
"cache": false,
"data": {
function (d) {
console.log(d);
}
},
},
但是在使用console.log时，我在控制台中收到以下消息
undefined
2 个解决方案
解决方案1
2 已采纳 2021-05-05 19:31:51
我发现了一些问题：
- 在你的格式1 function 你只声明两列，但在数据表中你尝试填充三列
- 您为内部数据表提供的数据只是
rowData['Consecutivo']的值，即“1000”，但数据表期望数据是对象数组； 因此，您应该提供用方括号括起来的 rowData object：[rowData] - 每次单击绿色按钮都会为第三个表声明一个新的事件处理程序； 因此，在销毁内部数据表之前，您应该使用
off('click')关闭它 - 文档准备好 function 未关闭（在示例中）； 因此我添加了
}); -
responsive: true在主数据表中隐藏状态列； 因此我删除了它 - class
details-control1未在 css 中定义，因此没有像details-control这样的可见按钮； 因此我删除了最后一个字符1虽然按钮没有 function 因为似乎没有更深的嵌套数据显示在二级数据表中（至少问题中没有提到）
由于 ajax 调用在堆栈片段中不起作用，我硬编码了我可以在您的示例图像中看到的数据（如purchase_data ），并为其他三个采购订单想象了更多的“No. Consecutivo”和“Date”值。 所以我替换了那个例子
ajax : {
"type": 'POST',
"url" : './test.php',
"dataType": 'JSON',
"cache": false,
"data": {
'param' : 1,
},
},
和
data: purchase_data,
工作示例：
var purchase_data = [ { PurchaseOrder: 789, DatePurchaseOrder: "27/04/2021", Total: "$100", Currency: "USD", Status: "Delivered", Consecutivo: 999, Date: "26/04/2021" }, { PurchaseOrder: 790, DatePurchaseOrder: "27/04/2021", Total: "$100", Currency: "USD", Status: "In Wait", Consecutivo: 1000, Date: "26/04/2021" }, { PurchaseOrder: 791, DatePurchaseOrder: "28/04/2021", Total: "$100", Currency: "USD", Status: "Delivered", Consecutivo: 1001, Date: "27/04/2021" }, { PurchaseOrder: 792, DatePurchaseOrder: "28/04/2021", Total: "$100", Currency: "USD", Status: "Delivered", Consecutivo: 1002, Date: "27/04/2021" }, ]; /* Formatting function for row details - modify as you need */ function format1(d) { // `d` is the original data object for the row console.log(d); let tabla = `<table id="tb-${d.PurchaseOrder}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;"> <thead> <tr> <th></th> <th> No. Consecutivo </th> <th> Date </th> </tr> </thead> <tbody> </tbody> </table>`; return $(tabla).toArray(); } $(document).ready(function () { $('#example').DataTable({ data: purchase_data, columns: [ { "className": 'details-control', "orderable": false, "data": null, "defaultContent": '' }, { "data": "PurchaseOrder" }, { "data": "DatePurchaseOrder" }, { "data": "Total"}, { "data": "Currency" }, { "data": "Status" } ], order: [[1, 'desc']] }); // Add event listener for opening and closing details $('#example tbody').on('click', 'td.details-control', function () { let tr = $(this).closest('tr'); let row = $('#example').DataTable().row(tr); let rowData = row.data(); let tbId = `#tb-${rowData.PurchaseOrder}`; if (row.child.isShown()) { // This row is already open - close it row.child.hide(); tr.removeClass('shown'); $(tbId).DataTable().destroy(); } else { // Open this row row.child(format1(rowData)).show(); $(tbId).DataTable({ data: [rowData], "searching": false, "bPaginate": false, "info": false, columns: [ { "className": 'details-control', "orderable": false, "data": null, "defaultContent": '' }, { data: 'Consecutivo' }, { data: 'Date' } ] }); tr.addClass('shown'); } }); });
.content { padding: 15px; } td.details-control { background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center; cursor: pointer; width: 30px; transition: .5s; } tr.shown td.details-control { background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center; width: 30px; transition: .5s; } table.dataTable td table.dataTable, table.dataTable td table.dataTable * { border: none; }
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <section class="content"> <div class="row"> <div class="col-xs-12"> <div class="box"> <div class="box-header"> <h3 class="box-title">Stackoverflow Test</h3> </div> <div id="box-body" style="padding: 0px 10px 10px 10px;"> <table id="example" class="table table-bordered table-hover"> <thead> <tr> <th></th> <th>PurchaseOrder</th> <th>DatePurchaseOrder</th> <th>Total</th> <th>Currency</th> <th>Status</th> </tr> </thead> </table> </div> </div> </div> </div> </section>
顺便说一句：如果确实没有更深的嵌套数据（如图像所示），则不需要第二个数据表，因为内部表中只有一行。 因此，一个普通的 html 表就足够了，并且可以使用 format1 function 制作，因为它已经获得了 rowData。
工作示例：
var purchase_data = [ { PurchaseOrder: 789, DatePurchaseOrder: "27/04/2021", Total: "$100", Currency: "USD", Status: "Delivered", Consecutivo: 999, Date: "26/04/2021" }, { PurchaseOrder: 790, DatePurchaseOrder: "27/04/2021", Total: "$100", Currency: "USD", Status: "In Wait", Consecutivo: 1000, Date: "26/04/2021" }, { PurchaseOrder: 791, DatePurchaseOrder: "28/04/2021", Total: "$100", Currency: "USD", Status: "Delivered", Consecutivo: 1001, Date: "27/04/2021" }, { PurchaseOrder: 792, DatePurchaseOrder: "28/04/2021", Total: "$100", Currency: "USD", Status: "Delivered", Consecutivo: 1002, Date: "27/04/2021" }, ]; var tabla; $(document).ready(function () { /* Formatting function for row details - modify as you need */ function format(d) { // `d` is the original data object for the row let tabla = '<table id="tb-' + d.PurchaseOrder + '" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">' + '<thead>' + '<tr>' + '<th>No. Consecutivo</th>' + '<th>Date</th>' + '</tr>' + '</thead>' + '<tbody>' + '<tr>' + '<td>' + d.Consecutivo + '</td>' + '<td>' + d.Date + '</td>' + '</tr>' + '</tbody>' + '</table>'; return $(tabla).toArray(); } var table = $('#example').DataTable({ data: purchase_data, columns: [ { className: 'details-control', orderable: false, data: null, defaultContent: '' }, { data: "PurchaseOrder" }, { data: "DatePurchaseOrder" }, { data: "Total"}, { data: "Currency" }, { data: "Status" } ], order: [[1, 'desc']] }); // Add event listener for opening and closing details $('#example tbody').on('click', 'td.details-control', function () { let tr = $(this).closest('tr'); let row = table.row(tr); let rowData = row.data(); let tbId = '#tb-' + rowData.PurchaseOrder; if (row.child.isShown()) { // This row is already open - close it row.child.hide(); tr.removeClass('shown'); $(tbId).DataTable().destroy(); } else { // Open this row row.child(format(rowData)).show(); tr.addClass('shown'); } }); });
.content { padding: 15px; } td.details-control { background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center; cursor: pointer; width: 30px; transition: .5s; } tr.shown td.details-control { background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center; width: 30px; transition: .5s; } table.dataTable td table, table.dataTable td table * { border: none;important; }
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <section class="content"> <div class="row"> <div class="col-xs-12"> <div class="box"> <div class="box-header"> <h3 class="box-title">Stackoverflow Test</h3> </div> <div id="box-body" style="padding: 0px 10px 10px 10px;"> <table id="example" class="table table-bordered table-hover"> <thead> <tr> <th></th> <th>PurchaseOrder</th> <th>DatePurchaseOrder</th> <th>Total</th> <th>Currency</th> <th>Status</th> </tr> </thead> </table> </div> </div> </div> </div> </section>
如果您希望将内部表拆分为两个嵌套的内部表，其中只有一行和一个键值对（如第一张图片所示），您需要第二种格式 function。
工作示例：
var purchase_data = [ { PurchaseOrder: 789, DatePurchaseOrder: "27/04/2021", Total: "$100", Currency: "USD", Status: "Delivered", Consecutivo: 999, Date: "26/04/2021" }, { PurchaseOrder: 790, DatePurchaseOrder: "27/04/2021", Total: "$100", Currency: "USD", Status: "In Wait", Consecutivo: 1000, Date: "26/04/2021" }, { PurchaseOrder: 791, DatePurchaseOrder: "28/04/2021", Total: "$100", Currency: "USD", Status: "Delivered", Consecutivo: 1001, Date: "27/04/2021" }, { PurchaseOrder: 792, DatePurchaseOrder: "28/04/2021", Total: "$100", Currency: "USD", Status: "Delivered", Consecutivo: 1002, Date: "27/04/2021" }, ]; /* Formatting function for row details - modify as you need */ function format1(d) { // `d` is the original data object for the row let tabla = `<table id="tb-${d.PurchaseOrder}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;"> <thead> <tr> <th></th> <th> No. Consecutivo </th> </tr> </thead> <tbody> </tbody> </table>`; return $(tabla).toArray(); } function format2(d) { // `d` is the original data object for the row let tabla = `<table id="tb-${d.Consecutivo}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;"> <thead> <tr> <th></th> <th> Date </th> </tr> </thead> <tbody> <tr> <td></td> <td> ${d.Date} </td> </tr> </tbody> </table>`; return $(tabla).toArray(); } $(document).ready(function () { $('#example').DataTable({ data: purchase_data, columns: [ { "className": 'details-control', "orderable": false, "data": null, "defaultContent": '' }, { "data": "PurchaseOrder" }, { "data": "DatePurchaseOrder" }, { "data": "Total"}, { "data": "Currency" }, { "data": "Status" } ], order: [[1, 'desc']] }); // Add event listener for opening and closing details $('#example tbody').on('click', 'td.details-control', function () { let tr = $(this).closest('tr'); let row = $('#example').DataTable().row(tr); let rowData = row.data(); let tbId = `#tb-${rowData.PurchaseOrder}`; if (row.child.isShown()) { // This row is already open - close it row.child.hide(); tr.removeClass('shown'); $(tbId).off('click'); $(tbId).DataTable().destroy(); } else { // Open this row row.child(format1(rowData)).show(); $(tbId).DataTable({ data: [rowData], "searching": false, "bPaginate": false, "info": false, columns: [ { "className": 'details-control1', "orderable": false, "data": null, "defaultContent": '' }, { data: 'Consecutivo' } ] }); tr.addClass('shown'); // Add event listener for opening and closing details $(tbId).on('click', 'td.details-control1', function () { let tr = $(this).closest('tr'); let row = $(tbId).DataTable().row(tr); let rowData = row.data(); if (row.child.isShown()) { // This row is already open - close it row.child.hide(); tr.removeClass('shown'); } else { // Open this row row.child(format2(rowData)).show(); tr.addClass('shown'); } }); } }); });
.content { padding: 15px; } td.details-control1, td.details-control { background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center; cursor: pointer; width: 30px; transition: .5s; } tr.shown td.details-control1, tr.shown td.details-control { background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center; width: 30px; transition: .5s; } table.dataTable td table, table.dataTable td table * { border: none;important; }
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <section class="content"> <div class="row"> <div class="col-xs-12"> <div class="box"> <div class="box-header"> <h3 class="box-title">Stackoverflow Test</h3> </div> <div id="box-body" style="padding: 0px 10px 10px 10px;"> <table id="example" class="table table-bordered table-hover"> <thead> <tr> <th></th> <th>PurchaseOrder</th> <th>DatePurchaseOrder</th> <th>Total</th> <th>Currency</th> <th>Status</th> </tr> </thead> </table> </div> </div> </div> </div> </section>
如果内表与主表一样宽对您很重要（如第一张图片中建议的那样），则需要更多的 css。
工作示例：
var purchase_data = [ { PurchaseOrder: 789, DatePurchaseOrder: "27/04/2021", Total: "$100", Currency: "USD", Status: "Delivered", Consecutivo: 999, Date: "26/04/2021" }, { PurchaseOrder: 790, DatePurchaseOrder: "27/04/2021", Total: "$100", Currency: "USD", Status: "In Wait", Consecutivo: 1000, Date: "26/04/2021" }, { PurchaseOrder: 791, DatePurchaseOrder: "28/04/2021", Total: "$100", Currency: "USD", Status: "Delivered", Consecutivo: 1001, Date: "27/04/2021" }, { PurchaseOrder: 792, DatePurchaseOrder: "28/04/2021", Total: "$100", Currency: "USD", Status: "Delivered", Consecutivo: 1002, Date: "27/04/2021" }, ]; /* Formatting function for row details - modify as you need */ function format1(d) { // `d` is the original data object for the row let tabla = `<table id="tb-${d.PurchaseOrder}" cellpadding="5" cellspacing="0" style="width: 100%;"> <thead> <tr> <th class="details"></th> <th> No. Consecutivo </th> </tr> </thead> <tbody> </tbody> </table>`; return $(tabla).toArray(); } function format2(d) { // `d` is the original data object for the row let tabla = `<table id="tb-${d.Consecutivo}" cellpadding="5" cellspacing="0" style="width: 100%; border-collapse: separate;"> <thead> <tr> <th class="details"></th> <th> Date </th> </tr> </thead> <tbody> <tr> <td></td> <td> ${d.Date} </td> </tr> </tbody> </table>`; return $(tabla).toArray(); } $(document).ready(function () { $('#example').DataTable({ data: purchase_data, columns: [ { className: 'details-control', orderable: false, data: null, defaultContent: '' }, { data: "PurchaseOrder" }, { data: "DatePurchaseOrder" }, { data: "Total"}, { data: "Currency" }, { data: "Status" } ], order: [[1, 'desc']] }); // Add event listener for opening and closing details $('#example tbody').on('click', 'td.details-control', function () { let tr = $(this).closest('tr'); let row = $('#example').DataTable().row(tr); let rowData = row.data(); let tbId = `#tb-${rowData.PurchaseOrder}`; if (row.child.isShown()) { // This row is already open - close it row.child.hide(); tr.removeClass('shown'); $(tbId).off('click'); $(tbId).DataTable().destroy(); } else { // Open this row row.child(format1(rowData)).show(); $(tbId).DataTable({ data: [rowData], searching: false, bPaginate: false, info: false, columns: [ { className: 'details details-control1', orderable: false, data: null, defaultContent: '' }, { data: 'Consecutivo' } ], order: [] }); tr.addClass('shown'); // Add event listener for opening and closing details $(tbId).on('click', 'td.details-control1', function () { let tr = $(this).closest('tr'); let row = $(tbId).DataTable().row(tr); let rowData = row.data(); if (row.child.isShown()) { // This row is already open - close it row.child.hide(); tr.removeClass('shown'); } else { // Open this row row.child(format2(rowData)).show(); tr.addClass('shown'); } }); } }); });
.content { padding: 15px; }.details { width: 16px; } table.dataTable tbody td[colspan] { padding: 0px; border: none; } table.dataTable.no-footer { border: none; } table.dataTable tbody th, table.dataTable tbody td { border-bottom-color: #dee2e6; } td.details-control1, td.details-control { background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center; cursor: pointer; transition: .5s; } tr.shown td.details-control1, tr.shown td.details-control { background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center; transition: .5s; } table.dataTable td table { width: 100%; }
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <section class="content"> <div class="row"> <div class="col-xs-12"> <div class="box"> <div class="box-header"> <h3 class="box-title">Stackoverflow Test</h3> </div> <div id="box-body" style="padding: 0px 10px 10px 10px;"> <table id="example" class="table table-bordered table-hover"> <thead> <tr> <th></th> <th>PurchaseOrder</th> <th>DatePurchaseOrder</th> <th>Total</th> <th>Currency</th> <th>Status</th> </tr> </thead> </table> </div> </div> </div> </div> </section>
解决方案2
1 2021-05-03 21:48:11
如何在Google表格的Datatables子行中添加图表？
[英]how to add highcharts in Datatables child row , from google sheets?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.