[英]JQuery Datatables: How to add child row?
Does Datatables define the child row with a css marker? 数据表是否使用CSS标记定义子行? I have an HTML table that includes child rows.
我有一个包含子行的HTML表。 I would like to set these as child rows in Datatables so they stay with the parent row when sorted.
我想将它们设置为数据表中的子行,以便它们在排序时与父行保持一致。 I could not find a reference to a css class that marks a row as a child row.
我找不到对将一行标记为子行的css类的引用。
All I could find was the JQuery row.child() function where you add child rows to the row but I am not good with JQuery and can't figure out how to add the row here. 我所能找到的只是JQuery row.child()函数,您可以在其中向该行添加子行,但是我对JQuery不太满意,无法弄清楚如何在此处添加行。
Please see this JSFiddle . 请参阅此JSFiddle 。 (Click "Program" to sort and the list icon to expand/collapse the child rows).
(单击“程序”进行排序,然后单击列表图标以展开/折叠子行)。
<table id="tprogram" class="table table-striped table-hover ">
<thead>
<tr>
<th class='icon_colunm no-sort'></th>
<th>Program</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-right"> <i class="btn btn-xs fa fa-list-ul" data-toggle="collapse" data-target=".collapsed1"></i>
</td>
<td class='name'>A</td>
</tr>
<tr class="collapse collapsed1">
<td class="text-right"> <i class="fa fa-minus"></i></td>
<td class='name'>a</td></tr>
<tr>
<td class="text-right"> <i class="btn btn-xs fa fa-list-ul" data-toggle="collapse" data-target=".collapsed2"></i>
</td>
<td class='name'>B</td></tr>
<tr class="collapse collapsed2">
<td class="text-right"> <i class="fa fa-minus"></i>
</td>
<td class='name'>a</td></tr>
<tr class="collapse collapsed2">
<td class="text-right"> <i class="fa fa-minus"></i>
</td>
<td class='name'>b</td></tr>
<tr class="collapse collapsed2">
<td class="text-right"> <i class="fa fa-minus"></i>
</td>
<td class='name'>c</td>
</tr>
</tbody>
$(document).ready(function() {
$('#tprogram').dataTable({
"bPaginate": true,
"bSort": true,
"bInfo": false,
"bFilter": true,
"bAutoWidth": false,
"LengthChange": false,
"iDisplayLength": 50,
});
$('#tprogram').on('click', '.fa-list-ul', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(*?*).show();
tr.addClass('shown');
}
});
});
I decided to insert my own class to the parent row and use the row.add() function to add the child rows manually with some JQuery. 我决定将自己的类插入父行,并使用row.add()函数通过一些JQuery手动添加子行。
$('.parentrow').closest('tr').each(function(){
var row = table.row(this);
childrows = $(this).closest('tr').nextUntil('.parentrow');
row.child(childrows).show();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.