Nested Json+ Multiple child row
Nested Json+ Multiple child row
Thefox
Posts: 2Questions: 3Answers: 0
Hello
I have this code working
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Comparaison</title>
<!-- include CSS basic stylesheet -->
<link href="https://cdn.datatables.net/fixedheader/3.0.0/css/fixedHeader.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/responsive/1.0.7/css/responsive.dataTables.min.css" rel="stylesheet">
<!-- include Javascript needed for datatables and plug-ins -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.0.0/js/dataTables.fixedHeader.min.js"></script>
<style>
td.details-control {
background: url('details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('details_close.png') no-repeat center center;
}
div.slider {
display: none;
}
table.dataTable tbody td.no-padding {
padding: 0;
}
</style>
</head>
<body>
<script>
$(document).ready(function() {
var table = $('#example').DataTable( {
paging: false,
fixedHeader: {
header: true,
footer: false
},
"ajax": "tableau_compar.json",
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "Name" },
{ "data": "Argent" },
{ "data": "Or" },
{ "data": "Classique" },
{ "data": "Luxe" },
{ "data": "Premium" },
{ "data": "Confort" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
// $('div.slider', row.child()).slideUp( function () {
row.child.hide();
tr.removeClass('shown');
//} );
}
else {
// Open this row
row.child($(
'<tr>'+
'<td></td>'+
'<td>' + row.data().sections[0].Name + '</td>'+
'<td>' + row.data().sections[0].Argent + '</td>'+
'<td>' + row.data().sections[0].Or + '</td>'+
'<td>' + row.data().sections[0].Classique + '</td>'+
'<td>' + row.data().sections[0].Luxe + '</td>'+
'<td>' + row.data().sections[0].Premium + '</td>'+
'<td>' + row.data().sections[0].Confort + '</td>'+
'</tr>'+
'<tr>'+
'<td></td>'+
'<td>' + row.data().sections[1].Name + '</td>'+
'<td>' + row.data().sections[1].Argent + '</td>'+
'<td>' + row.data().sections[1].Or + '</td>'+
'<td>' + row.data().sections[1].Classique + '</td>'+
'<td>' + row.data().sections[1].Luxe + '</td>'+
'<td>' + row.data().sections[1].Premium + '</td>'+
'<td>' + row.data().sections[1].Confort + '</td>'+
'</tr>'
), 'no-padding' ).show();
tr.addClass('shown');
//$('div.slider', row.child()).slideDown();
}
} );
} );
</script>
sur la base des informations disponibles en Janvier 2015 pour Amariz
<table id="example" class="display compact" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Argent</th>
<th>Or</th>
<th>Classique</th>
<th>Luxe</th>
<th>Premium</th>
<th>Confort</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Argent</th>
<th>Or</th>
<th>Classique</th>
<th>Luxe</th>
<th>Premium</th>
<th>Confort</th>
</tr>
</tfoot>
</table>
</body>
if I modify row.child like
var tabb = '';
row.child($(
$(row.data().sections).each(function (index){
return tabb = tabb +'<tr>'+
'<td></td>'+
'<td>' + row.data().sections[index].Name + '</td>'+
'<td>' + row.data().sections[index].Argent + '</td>'+
'<td>' + row.data().sections[index].Or + '</td>'+
'<td>' + row.data().sections[index].Classique + '</td>'+
'<td>' + row.data().sections[index].Luxe + '</td>'+
'<td>' + row.data().sections[index].Premium + '</td>'+
'<td>' + row.data().sections[index].Confort + '</td>'+
'</tr>';
})
does not work but no error are thrown in error console
the json file
{
"data": [
{
"Name": "Clauses générales",
"sections" : [
{
"Name": "Limitations de la police",
"Argent": "1 000 000 € par personne assurée et par année d’assurance",
"Or": "700 000 € par personne assurée et par année d’assurance",
"Classique":"",
"Luxe":"",
"Premium": "3 000 000 €",
"Confort": "1 500 000 €"
},
{
"Name": "Exclusions sur actes et majorations",
"Argent": "Toutes les majorations liées à la consultation ou la visite du généraliste et du spécialiste en cabinet ou à domicile sont exclues de la garantie EURO ARGENT, même celles non citées dans la nomenclature",
"Or": "",
"Classique":"",
"Luxe":"",
"Premium": "Pas d'exclusion sur ces actes et majorations remboursements seon les barèmes ci-après",
"Confort":""
}
],
"Argent": "",
"Or": "",
"Classique":"",
"Luxe":"",
"Premium": "",
"Confort": ""
}
}
Thanks in advance