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

我已经看到其他人提出这个问题的地方（比如这里： 在现有数据表中添加子行作为嵌套数据表 ）但我还没有看到它的答案。

我有一个“主”数据表，它使用子行function。 这是初始化“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' ><'row'r><'row'>", }); 

下一段代码位于上面的代码之后并完成两件事：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_">   Column 1 Column 2 Column 3e Column 4 Column 5 Column 6 Column 7e Column 8 Column 9 Column 10       

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

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

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

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

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

Answer 1

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