我尝试在父数据表的子行内创建数据表。父数据表中的源来自DOM,嵌套数据表的源也来自显示子行时生成的DOM。
子数据表无法正常工作。
$(document).ready(function() {
var table = $('#table_emissions').DataTable();
$('#table_emissions tbody').on('click', 'td.details-control', 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( getAjaxEmission(row.data()) ).show();
tr.addClass('shown');
var subtable = $('#table_messages_' + row.data().id).DataTable();
}
} );
} );
用于创建子DOM代码的JS函数:
function getAjaxEmission ( d ) {
var div = $('<div/>')
.addClass( 'loading' )
.text( 'Učitavanje...' );
$.ajax( {
type: "GET",
url: '/api/ntxEmission/' + d.id,
success: function ( json ) {
div
.html(formatNtxEmission(json.data))
.removeClass( 'loading' );
}
} );
return div;
}
function formatNtxEmission( m ) {
return '<div class="container" id="container_messages">' +
'<table class="table table-bordered table-striped display" id="table_messages_' + m.id +'">' +
'<thead class="thead-inverse">'+
'<tr>'+
'<th></th>'+
'<th>Id</th>'+
'<th>Oznaka</th>'+
'<th>Vrijeme prvog emitiranja</th>'+
'<th>Vrijeme zadnjeg emitiranja</th>'+
'<th>Broj emitiranja</th>'+
'</tr>'+
'</thead>'+
'<tbody>'+
formatListNtxMessages(m.transmittedMessages) +
'</tbody>'+
'</table>'+
'</div>';
}
子行中的表创建正常,但未形成为数据表。