父数据表的子行内的数据表

时间:2018-03-29 07:17:24

标签: 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');
    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>';
}
  

子行中的表创建正常,但未形成为数据表。

0 个答案:

没有答案