Question

我已经看到其他人提出这个问题的地方（比如这里：Add child row as nested datatable within exisiting datatable），但我还没有看到答案。

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

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表，我想使用datatables插件初始化。基本上我所拥有的是另一个“主”数据表的子行中的嵌套数据表。问题是，在我尝试使用以下命令初始化嵌套表上的数据表插件之前，一切正常：

  initTable1(id);

（注意：传递的id变量是为了防止多个表具有相同的ID。您可以在下面的代码中看到它是如何附加到datatable 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>

以下是DOES的工作原理，这可能会解释实际导致问题的原因。

1）如果我在AJAX调用中注释掉initTable1（）函数，那么它是有效的...除了第二个表上的数据表插件的初始化之外的一切。但是html填充了它应该在“master”数据表的子行中的位置。

2）如果我改变了AJAX数据的填充位置，它就可以工作 - 具体来说，它可以在“master”数据表之外工作。它不仅填充它应该的位置（注意注释掉的var load_member_leads指向$（'#test'）。），但它也正确初始化数据表。

如果我在第二个表上初始化数据表，并将所述表放在“master”数据表的子行中，它似乎只会中断。而且，休息时，我的意思是完全消失，好像AJAX调用失败 - 这不是根据console.log。

这个问题让我发疯，我做错了什么？任何帮助深表感谢！

Answer 1

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

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

1 个答案: