The child detail column is displayed on top of another header !
The child detail column is displayed on top of another header !
lazybrain
Posts: 13Questions: 5Answers: 0
Instead of having a header separately for a child row detail icon , it's on the same header of another field :
{% load static %}
<html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="{% static 'dataTables/media/js/jquery.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/jquery.dataTables.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/dataTables.tableTools.css' %}" type="text/css" />
<link href="{% static 'datatables/extensions/Responsive/css/dataTables.responsive.css' %}" rel="stylesheet">
<script src="{% static 'js/jquery.dataTables.js' %}"></script>
<script src="{% static 'datatables/extensions/TableTools/js/dataTables.tableTools.js' %}"></script>
<script src="{% static 'datatables/extensions/Responsive/js/dataTables.responsive.js' %}"></script>
<style type="text/css">
td.details-control {
background: url('{% static 'img/details_open.png' %}') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('{% static 'img/details_close.png' %}') no-repeat center center;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" id="example" class="display">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/javascript" language="javascript" class="init">
// setTimeout(function() { window.location=window.location;},20000);
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>'+d.Nom+'</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": {
"processing": true,
"url": "{% url 'api_login_list' %}",
"dataSrc": ""
},
"tableTools": {
"sSwfPath": "{% static 'datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf' %}",
"aButtons": [ "csv", "pdf", "print" ]
},
"language": {
"lengthMenu": "Display _MENU_ records per page",
"zeroRecords": "RESULTAT INTROUVABLE",
"info": " page _PAGE_ de _PAGES_",
"infoEmpty": "RESULTAT INTROUVABLE",
"infoFiltered": "(filtered from _MAX_ total records)"},
"columns": [
{
"className": 'details-control',
"field": null,
"orderable": false,
"defaultContent": ""
},
{ field: "Login" },
{ field: "Prenom" },
{ field: "Nom" },
],
// "order": [[2, 'asc']],
});
$('#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
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
});
</script>
</body>
</html>
and it gives me this error : DataTables warning: table id=example - Requested unknown parameter '3' for row 0
This discussion has been closed.