"Nested Table : how to nest one table into another with AJAX?"
Bootstrap 3.0.0 Snippet by muhittinbudak

<container> <table class="table table-striped table-hover js-table"> <thead> <tr> <th>Training</th> <th>Title</th> <th>Date</th> <th>End date</th> <th>Description</th> <th>nb of Applicants</th> <th>Actions</th> </tr> </thead> <tbody> <tr data-toggle="collapse" data-target="#collapse4039" class="clickable"> <td>Activités nautiques</td> <td>Activités nautiques - 16/10/2016</td> <td>16/oct./2016</td> <td>13/oct./2016</td> <td>Sequelae of viral hepatitis</td> <td>15</td> <td> <div class="btn-group btn-group-sm" role="group" aria-label="..."> <div class="btn-group " role="group" aria-label="Voir le detail"> <a href="#" class="parents js-view-parents" data-href="formation_json_parents" data-id=4039 data-toggle="tooltip" data-placement="top" alt="Voir les details" title="Details"> <span class="glyphicon glyphicon-eye-close" aria-hidden="true" style="color:black; margin: 5px;"></span> </a> </div> <div class="btn-group " role="group" aria-label="Valider les candidats"> <a href="valider" data-href='' alt="Valider les candidats" data-toggle="tooltip" data-placement="right" title="Valider les candidats"> <span class="glyphicon glyphicon-check" aria-hidden="true" style="color:black; margin: 5px;"></span> </a> </div> <div class="btn-group " role="group" aria-label="Imprimer la liste d'emargement pour cette formation"> <a href="/edsa-AgrementEPS/app_dev.php/formation/4039/liste?print=pdf" data-href="" alt="Download PDF list of applicants" data-toggle="tooltip" data-placement="right" name="Activités nautiques - 16/10/2016" title="Download PDF list of applicants"> <span class="glyphicon glyphicon-download-alt" aria-hidden="true" style="color:black; margin: 5px;"></span> </a> </div> </div> </td> </tr> <tr data-toggle="collapse" data-target="#collapse4095" class="clickable"> <td>Activités nautiques</td> <td> Activités nautiques - 24/10/2016</td> <td>24/oct./2016</td> <td>21/oct./2016</td> <td>Severe pre-eclampsia, third trimester</td> <td>0</td> <td> <div class="btn-group btn-group-sm" role="group" aria-label="..."> <div class="btn-group hidden" role="group" aria-label="Voir le detail"> <a href="#" class="parents js-view-parents" data-href="formation_json_parents" data-id=4095 data-toggle="tooltip" data-placement="top" alt="Voir les details" title="Voir les inscrits"> <span class="glyphicon " aria-hidden="true" style="color:black; margin: 5px;"></span> </a> </div> <div class="btn-group hidden" role="group" aria-label="Valider les candidats"> <a href="/valider" data-href='' alt="Valider les candidats" data-toggle="tooltip" data-placement="right" title="Valider les candidats"> <span class="glyphicon glyphicon-check" aria-hidden="true" style="color:black; margin: 5px;"></span> </a> </div> <div class="btn-group hidden" role="group" aria-label="Imprimer la liste d'emargement pour cette formation"> <a href="/print=pdf" data-href="" alt="Download PDF list of applicants" data-toggle="tooltip" data-placement="right" name="Activités nautiques - 24/10/2016" title="Download PDF list of applicants"> <span class="glyphicon glyphicon-download-alt" aria-hidden="true" style="color:black; margin: 5px;"></span> </a> </div> </div> </td> </tr> <tr data-toggle="collapse" data-target="#collapse3188" class="clickable"> <td>Activités nautiques</td> <td>Activités nautiques - 29/10/2016</td> <td>29/oct./2016</td> <td>26/oct./2016</td> <td>Other secondary chronic gout</td> <td>0</td> <td> <div class="btn-group btn-group-sm" role="group" aria-label="..."> <div class="btn-group " role="group" aria-label="Voir le detail"> <a href="#" class="parents js-view-parents" data-href="formation_json_parents" data-id=4039 data-toggle="tooltip" data-placement="top" alt="Voir les details" title="Voir les inscrits"> <span class="glyphicon glyphicon-eye-close" aria-hidden="true" style="color:black; margin: 5px;"></span> </a> </div> <div class="btn-group " role="group" aria-label="Valider les candidats"> <a href="valider" data-href='' alt="Valider les candidats" data-toggle="tooltip" data-placement="right" title="Valider les candidats"> <span class="glyphicon glyphicon-check" aria-hidden="true" style="color:black; margin: 5px;"></span> </a> </div> <div class="btn-group " role="group" aria-label="Imprimer la liste d'emargement pour cette formation"> <a href="/liste?print=pdf" data-href="" alt="Download PDF list of applicants" data-toggle="tooltip" data-placement="right" name="Activités nautiques - 16/10/2016" title="Download PDF list of applicants"> <span class="glyphicon glyphicon-download-alt" aria-hidden="true" style="color:black; margin: 5px;"></span> </a> </div> </div> </td> </tr> </tbody> </table> </container>
$(document).ready(function() { var parentsData = { "success": true, "parents": [{ "id": 1531, "Firstname": "Austin", "Surname": "Ana\u00eblle", "schoolId": "046039", "schoolName": "ARCAMBAL", "commune": "ARCAMBAL" }, { "id": 2032, "Firstname": "Ramos", "Surname": "L\u00e8i", "schoolId": "046043", "schoolName": "J CALVET", "commune": "CAHORS" }, { "id": 3036, "Firstname": "Baker", "Surname": "Salom\u00e9", "schoolId": "046043", "schoolName": "Z LAFAGE", "commune": "CAHORS" }, { "id": 1724, "Firstname": "Berry", "Surname": "Marl\u00e8ne", "schoolId": "046044", "schoolName": "J CALVET", "commune": "CAHORS" }] }; var $table = $('.js-table'); $table.find('.js-view-parents').on('click', function(e) { e.preventDefault(); var $btn = $(e.target), $row = $btn.closest('tr'), $nextRow = $row.next('tr.expand-child'); $btn.toggleClass('glyphicon-eye-close glyphicon-eye-open'); // if .expand-chid row exist already, toggle if ($nextRow.length) { $nextRow.toggle($btn.hasClass('glyphicon-eye-open')); // if not, create .expand-child row } else { /*$.ajax({ url: '/echo/json/', dataType: "json", data: parentsData, success: function (parentsData) {*/ var newRow = '<tr class="expand-child" id="collapse' + $btn.data('id') + '">' + '<td colspan="12">' + '<table class="table table-condensed table-bordered" width=100% >' + '<thead>' + '<tr>' + '<th>Surname</th>' + '<th>FirstName</th>' + '<th>School Id</th>' + '<th>School name</th>' + '</tr>' + '</thead>' + '<tbody>'; if (parentsData.parents) { $.each(parentsData.parents, function(i, parent) { newRow += '<tr>' + '<td>' + parent.Firstname + '</td>' + '<td>' + parent.Surname + '</td>' + '<td>' + parent.schoolId + '</td>' + '<td>' + parent.schoolName + ' ' + parent.commune + '</td>' + '</tr>'; }); } newRow += '</tbody></table></td></tr>'; // set next row $nextRow = $(newRow).insertAfter($row); /*} });*/ } }); });

Questions / Comments:

Related: See More