Wiersze potomków w DataTables przy użyciu AJAX

Question

Próbuję powiązać tabelę podrzędną z tabelą nadrzędną. Nie jestem w stanie dowiedzieć się, jak można to zrobić, gdy dane dla tabeli podrzędnej przychodzi za pośrednictwem wywołania AJAX, który następnie tworzy tabelę dynamiczną.

Śledzę this

Poniżej jest mój kod.

$('#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'); 
    } 
}); 

a następnie format() będzie

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 tutaj jsfiddle