"Table Nested row! load record sub table with AJAX!"
Bootstrap 3.0.0 Snippet by muhittinbudak

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- kullanici listesi baslangic --> <h1 id="kullanicihebir">Kullanıcı Listesi</h1> <table class="table kullaniciTablosu"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Role</th> </tr> </thead> <tbody> <tr> <td> <span> <img width="40" class="img-circle" alt="User Avatar" src="https://t.hizliresim.com/3vp0pp-s.jpg"> </span> </td> <td>Morrison</td> <td> <button class="btn btn-info parents tablodugmeler pull-right" lang="yorum" data-id=4039 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-comment" aria-hidden="true"></span> Yorum </button> <button class="btn btn-success tablodugmeler pull-right" lang="mesaj" data-id=4039 data-href="formation_json_parents" style="margin-left:10px;" > <span class="glyphicon glyphicon-send" aria-hidden="true"></span> Mesaj </button> </td> </tr> <tr> <td> <span class="chat-img pull-left"> <img width="40" class="img-circle" alt="User Avatar" src="https://t.hizliresim.com/JqO1DW-s.jpg"> </span></td> <td>Hendrix</td> <td> Amazing Guitarist</td> </tr> <tr> <td> <span class="chat-img pull-left"> <img width="40" class="img-circle" alt="User Avatar" src="https://t.hizliresim.com/njJnNR-s.jpg"> </span></td> <td>Hendrix</td> <td> <button class="btn btn-success tablodugmeler pull-right" lang="mesaj" data-id=4039 data-href="formation_json_parents" style="margin-left:10px;" > <span class="glyphicon glyphicon-send" aria-hidden="true"></span> Mesaj </button> <button class="btn btn-info parents tablodugmeler pull-right" lang="yorum" data-id=4039 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-comment" aria-hidden="true"></span> Yorum </button> </td> </tr> </tbody> </table> <!-- kullanici listesi bitis -->
// JavaScript Document $(document).ready(function() { //-----------------veri işleme başlangıç var anaVeri= { "success": true, "kullanici": [{ "id": 1531, "Firstname": "Muhittin", "Surname": "BUDAK", "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 = $('.kullaniciTablosu'); $table.find('.tablodugmeler').on('click', function(e) { // click button //e.preventDefault(); var $btn = $(e.target), $tablosatir = $btn.closest('tr'), $tablosonrakisatir = $tablosatir.next('tr.expand-child'); if ( $btn.attr("lang") === "mesaj" ) { ///////////// mesajlar butonuna tıklandığında olan olaylar. if ($tablosonrakisatir.css("display") === 'none') { // if panel close ! $tablosonrakisatir.slideDown(100); } else { // if panel open ! $tablosonrakisatir.slideUp(100); } $("#kullanicihebir").html($tablosatir.find("tr").length); if ($tablosonrakisatir.length) { // sonraki satır yok ise } else { // sonraki satır var ise /*$.ajax({ url: '/echo/json/', dataType: "json", data: anaVeri, success: function (anaVeri) {*/ var yenitablosatir = '<tr class="expand-child" id="collapse' + $btn.data('id') + '">' + '<td colspan="12">' + '<table class="table table-condensed altTablo" width=100% >' + '<thead>' + '<tr>' + '<th>Surname</th>' + '<th>FirstName</th>' + '<th>School Id</th>' + '<th>School name</th>' + '</tr>' + '</thead>' + '<tbody>'; if (anaVeri.kullanici) { $.each(anaVeri.kullanici, function(i, kullaniciTomar) { yenitablosatir += '<tr>' + '<td>' + kullaniciTomar.Firstname + '</td>' + '<td>' + kullaniciTomar.Surname + '</td>' + '<td>' + kullaniciTomar.commune + '</td>' + '<td><button type="button" id="' + kullaniciTomar.schoolId + '" class="btn btn-danger altdugme"><i class="fa fa-trash-o"></i> ' + kullaniciTomar.schoolId + ' Sil</button></td>' + '</tr>'; }); } yenitablosatir += '</tbody></table></td></tr>'; // set next row $tablosonrakisatir = $(yenitablosatir).insertAfter($tablosatir); $(".altdugme").click(function(){ var silmeDugmesi = $(this); //var altPanel = silmeDugmesi.closest(".altTablo").parentsUntil("tr"); var satirSayisi = silmeDugmesi.parent().parent().parent().parent().parent().find("tbody tr").length; $("#kullanicihebir").html("<font color=red>" + (satirSayisi - 1) + " record left!</font>"); var metinId = silmeDugmesi.attr("id"); if (confirm(metinId + " delete! Are you sure?")) { $(this).closest('tr').remove(); // row deleted. $btn.find("span").text( satirSayisi + " Mesaj"); if ( (satirSayisi-1) === 0 ) { // sub table if tr row count Zero than panel hide! altPanel.hide(); } } else { alert("SORRY, not deleted!"); } }); // end $(".altdugme").click } } // if click mesaj buton! if ( $btn.attr("lang") === "yorum" ) { //////// yorum butonuna tıklandığında olan olaylar. (if clicked command buton) $table.find('.tablodugmeler').trigger('click'); } }); // on click .tablodugmeler end });

Questions / Comments:

Related: See More