JQuery 数据表:如何添加子行?
JQuery Datatables: How to add child row?
Datatables 是否使用 css 标记定义子行?我有一个包含子行的 HTML table。我想将它们设置为 Datatables 中的子行,以便在排序时它们与父行保持一致。我找不到对将行标记为子行的 css class 的引用。
我能找到的只有 JQuery row.child() 函数,您可以在该函数中将子行添加到该行,但我不擅长 JQuery 并且无法弄清楚如何在此处添加行。
请看这个JSFiddle。 (单击 "Program" 进行排序,然后单击列表图标 expand/collapse 子行)。
<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');
}
});
});
我决定将自己的 class 插入父行,并使用 row.add() 函数手动添加带有一些 JQuery.
的子行
$('.parentrow').closest('tr').each(function(){
var row = table.row(this);
childrows = $(this).closest('tr').nextUntil('.parentrow');
row.child(childrows).show();
});
Datatables 是否使用 css 标记定义子行?我有一个包含子行的 HTML table。我想将它们设置为 Datatables 中的子行,以便在排序时它们与父行保持一致。我找不到对将行标记为子行的 css class 的引用。
我能找到的只有 JQuery row.child() 函数,您可以在该函数中将子行添加到该行,但我不擅长 JQuery 并且无法弄清楚如何在此处添加行。
请看这个JSFiddle。 (单击 "Program" 进行排序,然后单击列表图标 expand/collapse 子行)。
<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');
}
});
});
我决定将自己的 class 插入父行,并使用 row.add() 函数手动添加带有一些 JQuery.
的子行 $('.parentrow').closest('tr').each(function(){
var row = table.row(this);
childrows = $(this).closest('tr').nextUntil('.parentrow');
row.child(childrows).show();
});