通过单击以下jsfiddle中的"Create Child“按钮,您将为表中的第一行创建一个子行。此子行的内容是另一个DataTable。
http://jsfiddle.net/wthY9/2/
有人知道为什么会发生这种情况吗?这可能是DataTables的一个bug吗?
下面是小提琴中相应的代码:
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();
});
});发布于 2014-08-13 15:10:58
单击标题对子数据表进行排序时,可以向父表和子表的列(X)添加一个类('sorting_asc','sorting_desc')。
我会尝试为子表添加一个自定义类,并根据它创建一些自定义排序。
发布于 2016-10-06 06:28:00
该问题已从1.10.8版开始消失。有关解决方案,请参阅以下网址:https://github.com/DataTables/DataTables/issues/361
https://stackoverflow.com/questions/24357731
复制相似问题