通过单击以下jsfiddle中的“Create Child”按钮,您将为表格中的第一行创建子行。此子行的内容是另一个DataTable。
创建子项后,如果您通过其中一个列对子DataTable进行排序,您将看到父表中相同列的排序箭头也会更改:
有谁知道为什么会发生这种情况?这可能是DataTables的错误吗?
以下是小提琴的相应代码:
HTML
<table id="myTable">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sam</td>
<td>10</td>
<td>Left</td>
<td>Blue</td>
</tr>
<tr>
<td>Mike</td>
<td>8</td>
<td>Right</td>
<td>Red</td>
</tr>
<tr>
<td>Joe</td>
<td>3</td>
<td>Left</td>
<td>Blue</td>
</tr>
</tbody>
</table>
<script type="text/template" id="child_table">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jen</td>
<td>100</td>
<td>Left</td>
<td>Pink</td>
</tr>
<tr>
<td>Sal</td>
<td>88</td>
<td>Right</td>
<td>Green</td>
</tr>
</tbody>
</table>
</script>
<button id="createChild">Create Child</button>
JS
$(document).ready(function(){
var myDataTable = $('#myTable').DataTable({
"order":[],
});
$('#createChild').click(function(e){
e.preventDefault();
var $table = $($('#child_table').html());
$table.css('width','100%');
$table.DataTable();
myDataTable.row(0).child($table).show();
});
});
答案 0 :(得分:0)
单击标题以对子数据表进行排序,您可以将一个类(&#39; sorting_asc&#39;,&#39; sorting_desc&#39;)添加到父表和子表中列(X)。
我会尝试为子表附加一个自定义类,并根据它创建一些自定义排序。
答案 1 :(得分:0)
此问题已从版本1.10.8开始消失。请使用解决方案查看以下网址:https://github.com/DataTables/DataTables/issues/361