Hàng con trong DataTables sử dụng AJAX

Question

Tôi đang cố ràng buộc một bảng con với một bảng cha. Tôi không thể tìm ra cách này có thể được thực hiện khi dữ liệu cho bảng con đang đến thông qua một cuộc gọi AJAX mà sau đó tạo ra một bảng năng động.

Tôi đã theo dõi this

Dưới đây là mã của tôi.

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

và sau đó là format() sẽ

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(); 
     }, 
     ... 
    }); 
} 

bản demo đây jsfiddle