Rows of children in DataTables using AJAX

Question

I am trying to associate a child table with a parent table. I cannot understand how this can be done when the data for the child table goes through an AJAX call, which then creates a dynamic table.

I followed this

Below is my 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'); } }); 

and then format() will be

 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 here is jsfiddle