javascript - 在另一个数据表的子行中添加嵌套数据表

Question

我看到其他人在哪里问过这个问题(比如这里:Add child row as nested datatable within exisiting datatable)，但我还没有看到它的答案。

我有一个使用子行功能的“主”数据表。这是初始化“主”数据表的代码。 (我把它包括在内只是为了彻底，但这里的一切都很完美。)

var table = $('#members');

var oTable = table.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": "Loading..."
    },
    "buttons": [],
    "columnDefs": [
        {className: 'control'},
        {orderable: false, targets: 0 }
    ],
    // setup responsive extension: http://datatables.net/extensions/responsive/
    "responsive": true,
    "order": [

        [1, 'asc']

    ],
    "order-column": false,
    "lengthMenu": [
        [5, 10, 15, 20, -1],
        [5, 10, 15, 20, "All"] // change per page values here
    ],
    // set the initial value
    "pageLength": 5,
    "dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", 
});

下一段代码紧跟在上面的代码之后，完成了两件事: 1)它可以防止同时打开多个子行(只是个人喜好)和 2) 使用 AJAX 调用来填充刚刚打开的子行。

 table.on('click', 'tr', function () {

        var id = $(this).attr('id');
        if($(this).hasClass('parent'))
        {
            table.$('tr.parent').not(this).find('td:first-child').trigger('click');

            var load_member_leads = $(this).next().find('td.child > ul > li span.dtr-data');
            //var load_member_leads = $('#test');

            $.ajax({
                url: base_url + 'process/load_member_leads',
                type: 'POST',
                data: {test:id},
                dataType: "html", 
                success: function(data){
                    console.log ("success");
                    load_member_leads.html(data);
                    formRepeater();
                    initTable1(id);
                },
                failure: function (data) {
                    console.log ("failed");
                }
            });
        }
    });

这部分代码看起来运行良好，但这里是它变得棘手的地方。在返回的 AJAX 数据中，我有一个 html 表，我想使用数据表插件对其进行初始化。本质上，我所拥有的是另一个“主”数据表的子行中的嵌套数据表。问题是，一切正常，直到我尝试使用以下方法初始化嵌套表上的数据表插件:

  initTable1(id);

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

这是初始化第二个数据表的 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 变量相同)

 <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>

以下是有效的方法，它可能会揭示问题的实际原因。

1) 如果我在 AJAX 调用中注释掉 initTable1() 函数，它就可以工作...除了第二张表上数据表插件的初始化之外的所有内容。但是 html 填充了它应该在“主”数据表的子行中的位置。

2) 如果我更改填充 AJAX 数据的位置，它会起作用 - 具体来说，它会在“主”数据表之外起作用。它不仅填充它应该填充的位置(注意指向 $('#test'). 的注释掉的 var load_member_leads)，而且它还正确地初始化数据表。

如果我同时在第二个表上初始化数据表，并将所述表放在“主”数据表的子行中，它似乎只会中断。所谓中断，我的意思是完全消失，就好像 AJAX 调用失败一样 - 根据 console.log，这并非如此。

这个问题快把我逼疯了，我做错了什么？任何帮助深表感谢!

Answer 1

在这个问题上花了几个小时后我觉得有点愚蠢，但事实证明我使用的是响应式扩展而不是数据表的内置功能。对于遇到此问题的任何其他人，只需按照此处示例中的需要修改代码即可:https://datatables.net/examples/api/row_details.html