【发布时间】:2014-06-23 02:35:52
【问题描述】:
通过单击以下 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();
});
});
【问题讨论】:
标签: javascript jquery datatable jquery-datatables