Child row not working-table is not defined
Child row not working-table is not defined
lazybrain
Posts: 13Questions: 5Answers: 0
I'm trying to display a table with a child row using django and I keep having the error of the table is not defined thought all the js and css needed are there , this is my code :
{% load static %}
<html>
<html>
<head>
<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 rel="stylesheet" href="{% static 'datatables/extensions/Responsive/css/dataTables.responsive.css' %}">
<script src="{% static 'js/jquery-1.11.2.min.js' %}"></script>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/jquery.dataTables.js' %}"></script>
<script src="{% static 'js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'datatables/extensions/TableTools/js/dataTables.tableTools.js' %}"></script>
<script src="{% static 'datatables/extensions/Responsive/js/dataTables.responsive.js' %}"></script>
<script src="{% static 'datatables/extensions/Responsive/js/dataTables.responsive.min.js' %}"></script>
</head>
<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>
<body>
<table cellpadding="0" cellspacing="0" border="0" id="example" class="display">
<thead>
<tr><th></th><th>eeee</th><th>eeee</th><th>eeee</th><th>eeee</th></tr>
</thead>
<tbody></tbody>
<tfoot></tfoot>
</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>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
$('#example').dataTable( {
"dom": 'T<"clear">lfrtip',
"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',
"orderable": false,
"data": null,
"defaultContent": ""
},
{ "Field": "Nom" },
{ "Field": "Prenom" },
{ "Field": "Login" },
{ "Field": "Adress" },
],
"order": [[1, '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>
I hope someone can help me in this !
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
You shouldn't have both of those:
and you shouldn't have both of those:
....Still not working :(
It gives me the error of table.row is not a function !
I found the solution replace datatables with Datatables and removed the var
thank you , the answer you gave was somehow leading to the answer :))