数据表 - 手风琴（子行）答案

【问题标题】：DataTables - Accordian (Child Rows)数据表 - 手风琴（子行）
【发布时间】：2020-06-08 19:39:24
【问题描述】：

我正在尝试让一个 DataTable 与 Bootstrap Accordian 一起工作，当有一个父行和子行时，我已经成功地实现了这一点。

 var rowData = {
    a: 'Accounting', 
    b: 2350.10,
    c: [
        '<tr class="accordian-body collapse 1collapsed"><td>H1</td><td>1000.00</td></tr>','<tr class="accordian-body collapse 1collapsed"><td>H2</td><td>950.00</td></tr>','<tr class="accordian-body collapse 1collapsed"><td>H3</td><td>400.10</td></tr>']
}; $(document).ready(function() { dt1 = $('#example').DataTable({
createdRow: function( row, data, dataIndex ) {
  $(row).addClass( 'accordion-toggle' ).attr('data-toggle', 'collapse').attr('id', 1 ).attr('data-target', '.1collapsed');} ,
    columns: [
        {data: 'a'},
        {data: 'b'},
    ],
});

// nodes
var childNodes = $();
for (var c of rowData.c) {
    childNodes = childNodes.add( c );
}    
// add row + children
dt1.row.add(rowData)
    .child(childNodes).show()     
    .draw(false);});

JS FIDDLE

但是然后，当我添加带有相应子项的第二行时，DataTable 将不会加载。

var rowData = [{
    a: 'Marketing', 
    b: 2350.10,
    c: [
        '<tr class="accordian-body collapse 1collapsed"><td>H1</td><td>1000.00</td></tr>','<tr class="accordian-body collapse 1collapsed"><td>H2</td><td>950.00</td></tr>','<tr class="accordian-body collapse 1collapsed"><td>H3</td><td>400.10</td></tr>']
},{
    a: 'Accounting', 
    b: 2350.10,
    c: [
        '<tr class="accordian-body collapse 1collapsed"><td>H1</td><td>1000.00</td></tr>','<tr class="accordian-body collapse 1collapsed"><td>H2</td><td>950.00</td></tr>','<tr class="accordian-body collapse 1collapsed"><td>H3</td><td>400.10</td></tr>']
}];var accordian = 1;$(document).ready(function() {
dt1 = $('#example').DataTable({
createdRow: function( row, data, dataIndex ) {
  $(row).addClass( 'accordion-toggle' ).attr('data-toggle', 'collapse').attr('id', 1 ).attr('data-target', '.1collapsed');} ,
    columns: [
        {data: 'a'},
        {data: 'b'},
    ],
});

// nodes
var childNodes = $();
for (var c of rowData.c) {
    childNodes = childNodes.add( c );
}    
// add row + children
dt1.row.add(rowData)
    .child(childNodes).show()     
    .draw(false); });

JS FIDDLE 2

我做错了什么？我不确定我的 JS 数组/对象是否没有正确形成，但也可能是节点编码。任何人都可以帮忙吗？我很欣赏手风琴编号可能会关闭，这会导致它们同时打开，但这将在最终版本中修复，但我需要获得不止一行。

【问题讨论】：

标签： javascript datatables

【解决方案1】：

答案.....

遍历节点并添加行！

rowData.forEach(rowData => {
var childNodes = $();
for (var c of rowData.c) {
    childNodes = childNodes.add( c );
}    
// add row + children
dt1.row.add(rowData)
    .child(childNodes).show()     
    .draw(false); });

JS FIDDLE #59

【讨论】：