Javascript 父数据表的子行中的数据表
我尝试在父数据表的子行中创建数据表。父数据表中的源来自DOM,嵌套数据表的源也来自显示子行时生成的DOM 子数据表不工作。Javascript 父数据表的子行中的数据表,javascript,jquery,datatables,Javascript,Jquery,Datatables,我尝试在父数据表的子行中创建数据表。父数据表中的源来自DOM,嵌套数据表的源也来自显示子行时生成的DOM 子数据表不工作。 $(document).ready(function() { var table = $('#table_emissions').DataTable(); $('#table_emissions tbody').on('click', 'td.details-control', function () { var tr = $(this).closest('tr
$(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>';
}
函数getAjaxEmission(d){
var div=$('')
.addClass('loading')
.文本('Učitavanje…');
$.ajax({
键入:“获取”,
url:'/api/ntxEmission/'+d.id,
成功:函数(json){
div
.html(formatNtxEmission(json.data))
.removeClass(“加载”);
}
} );
返回div;
}
函数formantxemission(m){
返回“”+
'' +
''+
''+
''+
“Id”+
“Oznaka”+
“Vrijeme prvog emitiranja”+
“Vrijeme zadnjeg emitiranja”+
“Broj emitiranja”+
''+
''+
''+
formatListNtxMessages(m.transmittedMessages)+
''+
''+
'';
}
子行中的表创建正常,但未格式化为datatable
您必须在ajax-success之后进行操作
ajax
调用是异步的。因此,初始化datatable
的行将在ajax
调用完成之前执行,因此datatable
不会在新添加的数据上初始化。您需要在ajax
函数上使用callback
,或者datatable
必须提供某种方式,才能通过ajax
获取row
详细信息;在ajax的成功方法中。谢谢。断然的。你们都是对的。我的子数据表在我输入子id后消失:(