Untergeordnete Zeilen in DataTables mit AJAX

Question

Ich versuche, eine untergeordnete Tabelle mit einer übergeordneten Tabelle zu binden. Ich bin nicht in der Lage herauszufinden, wie dies getan werden kann, wenn die Daten für die untergeordnete Tabelle durch einen AJAX-Aufruf kommen, der dann eine dynamische Tabelle erstellt.

ich gefolgt this

Unten ist mein Code.

$('#myTable tbody).on('click', 'td.details-control', function() { 

     var tr = $(this).closest('tr'); 
     var row = $('#myTable').DataTable().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(format()).show(); 
      tr.addClass('shown'); 
     } 
    }); 

function format() { 

    $.ajax({ 
     type: 'GET', 
     url: '@Url.Action("MyFunction", "Home")', 
     data: { "Id": MyId }, 
     dataType: "json", 
     async: false, 
     success: function (data) { 
      var list = data; 
      $.each(list, function (index, item) { 

       return '<table>.......<table />'; 

       //i need to loop across the list and create a dynamic table with tr and td 


      }); 
     }, 
     error: function (result) { 
      var error = JSON.stringify(result); 
      throw "Error..."; 
     } 
    }); 
} 

Answer 1

$('#myTable tbody').on('click', 'td.details-control', function() { 

    var tr = $(this).closest('tr'); 
    var row = $('#myTable').DataTable().row(tr); 

    if (row.child.isShown()) { 
     // This row is already open - close it 

     row.child.hide(); 
     tr.removeClass('shown'); 
    } 
    else { 
     format(row.child); // create new if not exist 
     tr.addClass('shown'); 
    } 
}); 

und dann wird der format()

function format(callback) { 
    $.ajax({ 
     .... 
     //async: false, you can use async 
     success: function (data) { 
      var list = data; 
      var html = ''; 
      $.each(list, function (index, item) { 
       ... 
       //create <tr> <td> with loop 
       html= '<tr><td>.......</tr>'; 
      }); 
      callback($('<table>' + html + '</table>')).show(); 
     }, 
     ... 
    }); 
} 

Demo sein hier jsfiddle