Javascript 在另一个datatable的子行中添加嵌套datatable

我看到了其他人问这个问题的地方（比如这里：），但我还没有看到答案

我有一个“主”数据表，它利用了子行功能。下面是初始化“主”数据表的代码。（我把它包括进来只是为了彻底，但这里的一切都很完美。）

代码的这一部分似乎工作得很好，但这里是它变得棘手的地方。在返回的AJAX数据中，我有一个html表，我想使用datatables插件初始化它。从本质上讲，我将拥有另一个“主”数据表的子行中的嵌套数据表。问题是，在我尝试使用以下命令初始化嵌套表上的datatable插件之前，一切都很正常：

  initTable1(id);

（注意：传递的id变量是为了防止多个表具有相同的id。您可以在下面的代码中看到它是如何附加到datatable init调用的。）调用此函数后，子行中的所有内容都将消失，并从DOM中删除。刚刚走了。我不知道为什么

以下是初始化第二个datatable的initTable1（）函数中的代码：

 var table2 = $('#leads_' + id);

    var oTable2 = table2.dataTable({
        "language": {
            "aria": {
                "sortAscending": ": activate to sort column ascending",
                "sortDescending": ": activate to sort column descending"
            },
            "emptyTable": "No data available in table",
            "info": "Showing _START_ to _END_ of _TOTAL_ entries",
            "infoEmpty": "No entries found",
            "infoFiltered": "(filtered1 from _MAX_ total entries)",
            "lengthMenu": "_MENU_ entries",
            "search": "Search:",
            "zeroRecords": "No matching records found"
        },

        destroy: true,

        //setup buttons extentension: http://datatables.net/extensions/buttons/
        buttons: [],

        // setup responsive extension: http://datatables.net/extensions/responsive/
        responsive: {
            details: {
                type: 'column',
                target: -1
            }
        },
        "columnDefs": [ {
           className: 'control',
           orderable: false,
           targets:   -1
        } ],
        "order": [
            [0, 'asc']
        ],
        "ordering": false,
        "lengthMenu": [
            [5, 10, 15, 20, -1],
            [5, 10, 15, 20, "All"] // change per page values here
        ],
        // set the initial value
        "pageLength": 10,
        "dom": ""

    });

为了更好地衡量，这里是通过AJAX调用获取的代码。（注意$test变量与传递给initTable1函数的id变量相同）

---

在这一问题上花了几个小时之后，我觉得自己有点傻，但事实证明我使用的是响应扩展，而不是datatables的内置功能。对于遇到此问题的任何其他人，只需按照此处示例中的需要修改代码即可：
我设法找到了更多信息。因此，在父tr中有一个td填充子信息。到目前为止，我一直将td留白，因为我将使用AJAX调用填充它的内容。好的，如果我硬编码一个与ajax调用中ID相同的空表，那么父tr内部td中的表将初始化datatables。但是子表保持不活动状态。。。我真的很想帮助你，因为我的应用程序中有工作嵌套的数据表，但是如果没有JSFIDLE或我可以使用的东西，我很难知道出了什么问题。我也没有看到任何
row.child（）
调用，这就是官方文档告诉您实现子行的方式。谢谢Eric。我终于弄明白了。我使用的是响应性扩展，而不是内置功能。这就是我直接从一个主题复制代码并假设而不是更加关注的结果。
  initTable1(id);

 var table2 = $('#leads_' + id);

    var oTable2 = table2.dataTable({
        "language": {
            "aria": {
                "sortAscending": ": activate to sort column ascending",
                "sortDescending": ": activate to sort column descending"
            },
            "emptyTable": "No data available in table",
            "info": "Showing _START_ to _END_ of _TOTAL_ entries",
            "infoEmpty": "No entries found",
            "infoFiltered": "(filtered1 from _MAX_ total entries)",
            "lengthMenu": "_MENU_ entries",
            "search": "Search:",
            "zeroRecords": "No matching records found"
        },

        destroy: true,

        //setup buttons extentension: http://datatables.net/extensions/buttons/
        buttons: [],

        // setup responsive extension: http://datatables.net/extensions/responsive/
        responsive: {
            details: {
                type: 'column',
                target: -1
            }
        },
        "columnDefs": [ {
           className: 'control',
           orderable: false,
           targets:   -1
        } ],
        "order": [
            [0, 'asc']
        ],
        "ordering": false,
        "lengthMenu": [
            [5, 10, 15, 20, -1],
            [5, 10, 15, 20, "All"] // change per page values here
        ],
        // set the initial value
        "pageLength": 10,
        "dom": ""

    });

 <table class="table table-striped table-bordered dt-responsive" width="100%" id="leads_<?php echo $test; ?>">
                            <thead>
                                <tr>
                                    <th class="all">Column 1</th>
                                    <th class="all">Column 2</th>
                                    <th class="all">Column 3e</th>
                                    <th class="all">Column 4</th>
                                    <th class="all">Column 5</th>
                                    <th class="all">Column 6</th>
                                    <th class="all">Column 7e</th>
                                    <th class="all">Column 8</th>
                                    <th class="none">Column 9</th>
                                    <th class="all">Column 10</th>
                                </tr>
                            </thead>
                            <tbody>
                            <!-- table rows populated here - this is currently hardcoded for testing -->
                            </tbody>
                        </table>