<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 ---------->
<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);
/*}
});*/
}
});
});
