javascript - 如何将子行添加到数据表中的子行-6ren

javascript - 如何将子行添加到数据表中的子行

转载作者：行者123 更新时间：2023-12-03 23:38:47

我想在我借助 Datatables 制作的表格的次级行中添加一个新的子级别，这次我想为我的次级行生成一个新的子级，我附加了一个 example我想用它来解释，我从数据表中发现这是我想要达到的目标，我只是对这里使用的语法和我在当前代码中使用的语法感到有点困惑。

我附加了用于构建具有单个子行的数据表的 Javascript 代码:

/* 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是父行，No. Consecutivo 标题是父 PurchaseOrder 行的子行，Date 标题是 No 的子行。连续

更新 2:

在搜索和搜索文档之间，我遇到了另一个 example ，但它仍然没有给我一个更清晰的想法，我不知道是否有必要修改我正在使用的代码并使其适应我在示例中找到的内容或我正在使用的代码。我计划的可以完成。

更新 3:

再改进一下代码，我已经到了可以找到展开第二个子行的按钮的地步，但是当点击它时，它并没有展开。我附上一个例子并分享已经改进的代码:

首先，在 format1() 函数中，我只是创建表并将其作为 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

最佳答案

我发现了一些问题:

在您的 format1 函数中您只声明了两列，但在数据表中您尝试填充三列
您为内部数据表提供的数据只是 rowData['Consecutivo'] 的值，即“1000”，但数据表期望数据是一个对象数组；因此，您应该提供用方括号括起来的 rowData 对象:[rowData]
每次单击绿色按钮，都会为第三个表声明一个新的事件处理程序；因此你应该在销毁内部数据表之前用 off('click') 关闭它
文件就绪功能未关闭(示例中)；为此我添加了 });
responsive : true 隐藏状态列；因此我删除了它
类 details-control1 没有在 css 中定义，因此没有像 details-control 这样的可见按钮；因此我删除了最后一个字符 1 虽然按钮没有功能，因为似乎没有更深的嵌套数据显示在二级数据表中(至少问题中没有提到)<

由于 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 函数制作，因为它已经有了 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>

如果您希望内表分成两个嵌套的内表，只有一行和一个键值对(如第一张图片所示)，您需要第二个格式函数。

工作示例:

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>