1
다음 jsfiddle에서 "Create Child"단추를 클릭하면 테이블의 첫 번째 행에 대한 자식 행이 만들어집니다. 이 자식 행의 내용은 다른 DataTable입니다. 아이 후 DataTable 내 DataTable 정렬
당신은 그것의 열 중 하나에 의해 자식의 DataTable을 정렬 할 경우, 당신은 정렬 화살표는 부모 테이블에서 동일한 컬럼에 대한 변경 것을 볼 수, 생성됩니다합니까 왜 이런 일이 일어날 지 아무도 모릅니다. DataTables의 버그 일 수 있습니까? 여기
가 바이올린에서 해당 코드입니다 : 자식 데이터 테이블을 정렬하려면 머리글을 클릭에
<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();
});
});