<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(User list)</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
});
