Requested unknown parameter '5' for row 0
Requested unknown parameter '5' for row 0
lazybrain
Posts: 13Questions: 5Answers: 0
I need to figure out what's wrong in my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="DataTables-1.10.7/DataTables-1.10.7/media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.7/DataTables-1.10.7/extensions/TableTools/css/dataTables.tableTools.css">
<script type="text/javascript" language="javascript" src="DataTables-1.10.7/DataTables-1.10.7/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="DataTables-1.10.7/DataTables-1.10.7/media/js/jquery.dataTables.js"></script>
<style type="text/css">
td.details-control {
font-weight: bold;
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;
}
</style>
<script type="text/javascript" language="javascript" class="init">
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="0" cellspacing="0" border="0" class="display" style="padding-left:0px; font-weight:bold">'+
'<tr>'+
'<td>This is a test</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table= $('#example').DataTable( {
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": "",
},
{"orderDataType": "dom-text-numeric"},
{"orderDataType": "dom-text-numeric"},
{"orderDataType": "dom-text-numeric"},
{"orderDataType": "dom-text-numeric"},
{"orderDataType": "dom-text-numeric"},
],
"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>
</head>
<body>
<div class="container">
<section>
<table id="example" class="display" cellspacing="0" width="65%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
</tr>
</tbody>
</table>
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
There are only 5 columns in your tbody, but the thead defines 6.
Allan
When I remove the thead the child row details icon take the name place instead of having its own column !
I would suggest adding an empty cell at the start of the body rows.
Allan
it works now.