在另一个数据表的子行中添加嵌套的数据表 [英] Add nested datatable within child row of another datatable
问题描述
我已经看到其他人问过这个问题（像这样：将子行添加为现有数据表中的嵌套数据表），但我还没有看到它的回答。
我有一个主数据表，使用的子行功能。以下是初始化主数据表的代码。 （我包括它只是为了彻底，但这里的一切工作完美。）
var table = $（'＃members '）;
var oTable = table.dataTable（{
language：{
aria：{
sortAscending：：activate to排序列升序，
sortDescending：：激活排序列降序
}，
emptyTable：表中无可用数据，
info ：显示_TOTAL_条目的_START_到_END_，
infoEmpty：找不到条目，
infoFiltered：（从_MAX_总条目过滤1），
lengthMenu ：_MENU_ entries，
search：Search：，
zeroRecords：Loading ...
}，
buttons：[]，
columnDefs：[
{className：'control'}，
{orderable：false，targets：0}
]，
//设置响应扩展： http://datatables.net/extensions/responsive/
respond：true，
order：[
[1，'asc']
]，
order-column：false，
lengthMenu：[
[5，10，15，20，-1]，
[5，10，15，20，全部] //每页更改值
]，
//设置初始值
pageLength：5，
dom：<'row'<'col-md-12'B>< ;'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f><'table-scrollable't&行'<'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 '）;
if（$（this）.hasClass（'parent'））
{
表。$（'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）;
}，
失败：function（data）{
console.log（failed）;
}
}）;
}
}）;
这部分代码似乎运行良好，但这里是棘手的地方。在返回的AJAX数据中，我有一个html表，我想使用数据表插件进行初始化。基本上我将是另一个主数据表的子行内的嵌套数据表。问题是，一切都很好，直到我尝试使用以下方式初始化嵌套表中的datatable插件：
initTable1（id）;
（注意：正在传递的id变量是为了防止具有相同ids的多个表，您可以看到在下面的代码中，它如何附加到datatable init调用。）一旦调用此函数，子行中的所有内容都将消失，并从DOM中删除。刚走了我不知道为什么
这是初始化第二个datatable的initTable1（）函数中的代码：
code> var table2 = $（'＃leads_'+ id）;
var oTable2 = table2.dataTable（{
language：{
aria：{
sortAscending：：activate to sort column ascending ，
sortDescending：：激活排序列降序
}，
emptyTable：表中没有可用数据，
info：显示_START_到_END_的_TOTAL_条目，
infoEmpty：没有条目找到，
infoFiltered：（从_MAX_总条目过滤1），
lengthMenu：_MENU_条目，
search：Search：，
zeroRecords：找不到匹配的记录
}，
destroy：true，
//设置按钮扩展：http://datatables.net/extensions/buttons/
按钮：[]，
//设置响应扩展：http：// datatables.net/extensions/responsive/
响应：{
详细信息：{
类型：'column'，
target：-1
}
}，
columnDefs：[{
className：'control'，
$ b $ 0 $
订单：false，
lengthMenu：[
[5，10，15，20，-1]，
[5，10，15，20，全部
]，
//设置初始值
pageLength：10，
dom：
} ）;
为了很好的测量，这里是由AJAX调用获取的代码。 （注意$ test变量与传递给initTable1函数的id变量相同）
< table class = table table-striped table-bordered dt-responsivewidth =100％id =leads_<？php echo $ test;？>>
< thead>
< tr>
< th class =all>列1< / th>
< th class =all>列2< / th>
< th class =all>列3e< / th>
< th class =all>列4< / th>
< th class =all>列5< / th>
< th class =all>列6< / th>
< th class =all>列7e< / th>
< th class =all>列8< / th
< th class =none>列9< / th>
< th class =all>列10< / th
< / tr>
< / thead>
< tbody>
<！ - 这里填充的表行 - 这是目前硬编码的测试 - >
< / tbody>
< / table>
这是什么工作，这可能会揭示实际上导致问题的原因。 >
1）如果我在AJAX调用中注释掉了initTable1（）函数，那么这个工作很好，除了第二个表上的datatable插件的初始化之外。但是html会填充master数据表的子行内的位置。
2）如果我更改了AJAX数据的填充位置，它在主数据表之外工作。它不仅填充它应该在哪里（注意注释掉var load_member_leads指向$（'＃test'）），但它也正确初始化数据表。
如果我在第二个表上初始化数据表，并将该表放在主数据表的子行中，似乎就会中断。而通过休息，我的意思是完全消失，好像AJAX调用失败 - 这不是根据console.log。
这个问题让我疯狂，什么我做错了吗任何帮助深表感谢！
在这个问题上花了几个小时，我感觉到愚蠢，但事实证明，我使用的是响应式扩展，而不是内置功能与数据表。对于任何其他遇到此问题的人，只需按照以下示例的要求对代码进行修改： https ：//datatables.net/examples/api/row_details.html
I have seen where others have asked this question (like here: Add child row as nested datatable within exisiting datatable) but I have yet to see it answered.
I have a "master" datatable that makes use of the child row feature. Here's the code that initializes the "master" datatable. (I'm including it just to be thorough, but everything here works perfect.)
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>>",
});
This next bit of code is located right after the above code and accomplishes 2 things: 1) It prevents multiple child rows from being opened at once (just a personal preference) and 2) Uses an AJAX call to populate the child row that was just toggled open.
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");
}
});
}
});
This portion of the code appears to be working well, but here is where it gets tricky. Within the returned AJAX data, I have an html table that I would like to initialize using the datatables plugin. Essentially what I'd have is a nested datatable within a child row of another "master" datatable. The problem is, everything works great until I try to initialize the datatable plugin on the nested table using:
initTable1(id);
(Note: the id variable being passed is to prevent multiple tables with the same ids. You can see in the code below how it's appended to the datatable init call.) Once this function is called, everything in the child row disappears and is erased from the DOM. Just gone. And I have no idea why.
Here is the code within the initTable1() function that initializes the 2nd datatable:
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": ""
});
And for good measure, here is the code being fetched by the AJAX call. (Note the $test variable is the same as the id variable being passed to the initTable1 function)
<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>
Here's what DOES work, which may shed some light as to what's actually causing the problem.
1) It works if I comment out the initTable1() function within the AJAX call...well everything but the initialization of the datatable plugin on the 2nd table. But the html populates where it should within the child row of the "master" datatable.
2) It works if I change where the AJAX data is being populated - specifically, it works outside of the "master" datatable. It not only populates where it should (note the commented out var load_member_leads that points to $('#test').), but it initializes datatables correctly as well.
It only seems to break if I both initialize datatables on the second table, and place said table in the child row of the "master" datatable. And by break, I mean completely disappear as if the AJAX call failed - which it isn't according to the console.log.
This problem is driving me crazy, what am I doing wrong? Any help is much appreciated!
I feel kind of stupid after spending hours on this one issue, but it turns out I was using the responsive extension rather than the built in functionality with datatables. For anyone else running into this issue, just follow and modify the code as needed from the example here: https://datatables.net/examples/api/row_details.html
这篇关于在另一个数据表的子行中添加嵌套的数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
