I have a details row with datatables. Details row is working properly, but when i go to the other page the error comes up.
Here my HTML
<table id="dt_basic" class="table table-striped table-hover" width="100%">
<thead>
<tr>
<th></th>
<th class="text-center">ID</th>
<th class="text-center">Nama Bank</th>
<th class="text-center">Nama Akun</th>
<th class="text-center">No. Rekening</th>
<th class="text-center">Actions</th>
</tr>
</thead>
</table>
<script src="<?php echo ASSETS_URL; ?>/js/handlebars-v4.0.10.js"></script>
<script id="details-template" type="text/x-handlebars-template">
<table class="table">
<tr>
<td>Detail Info :</td>
<td>Tidak ada informasi tambahan </td>
</tr>
</table>
</script>
My JS
var template = Handlebars.compile($("#details-template").html());
$('#dt_basic').dataTable({
processing: true,
serverSide: true,
ajax: 'datatables/dataBank',
columns: [
{
"className": 'details-control',
"orderable": false,
"searchable": false,
"data": null,
"defaultContent": ''
},
{ data: 'id', name: 'id', orderable:true},
{ data: 'nama_bank', name: 'nama_bank', orderable:true },
{ data: 'nama_akun', name: 'nama_akun',orderable:true },
{ data: 'no_rek', name: 'no_rek',orderable:true },
{ data: 'action', name: 'action', 'searchable':false },
],
"sDom": "<'dt-toolbar hidden-print'<'col-xs-12 col-sm-11'f><'col-sm-1 col-xs-12 hidden-xs'l>r>"+
"t"+
"<'dt-toolbar-footer hidden-print'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
"autoWidth" : true,
"preDrawCallback" : function() {
// Initialize the responsive datatables helper once.
if (!responsiveHelper_dt_basic) {
responsiveHelper_dt_basic = new ResponsiveDatatablesHelper($('#dt_basic'), breakpointDefinition);
}
},
"rowCallback" : function(nRow) {
responsiveHelper_dt_basic.createExpandIcon(nRow);
},
"drawCallback" : function(oSettings) {
responsiveHelper_dt_basic.respond();
},
order: [[1, 'desc']],
"lengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]],
'iDisplayLength': 50,
});
$('#dt_basic 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( template(row.data()) ).show();
tr.addClass('shown');
}
});
If i stay in one page and access the datatables, everything works just fine. But when i going to the other page, this error comes up
jquery.dataTables.min.js:62 Uncaught TypeError: Cannot read property 'style' of undefined
at Ha (jquery.dataTables.min.js:62)
at Z (jquery.dataTables.min.js:13)
at t.<anonymous> (jquery.dataTables.min.js:126)
at t.iterator (jquery.dataTables.min.js:100)
at t.<anonymous> (jquery.dataTables.min.js:126)
at Function.adjust (jquery.dataTables.min.js:103)
at t.<anonymous> (jquery.dataTables.min.js:126)
at t.visible (jquery.dataTables.min.js:103)
at t.<anonymous> (jquery.dataTables.min.js:138)
at t.iterator (jquery.dataTables.min.js:100)
When I delete this
{
"className": 'details-control',
"orderable": false,
"searchable": false,
"data": null,
"defaultContent": ''
},
the error has gone, but my table doesnt have child row / detail row. Please help me Arjay
Thanks for wonderfull datatables.
Are you using some other extensions of dataTable like pagination? I think I encountered this before and fixed it by removing some extensions.
im not using other datatables extensions. Im using SmartAdmin template, it already include datatables.
I remove all datatables js in this template, and using yajra datatables.
I make some example. Here check my screenshot, hope u can help me fix this :)
This is blank page. There is nothing here...
This is datatables page. First load (or first load from other page). This datatables works perfectly.
Then I'm going to the other page. For easy check, lets going to the blank page. And the error shows. Blank page turn into datatables page, without data.
{
"className": 'details-control',
"orderable": false,
"searchable": false,
"data": null,
"defaultContent": ''
},
If i delete this, evertyhing works fine, but datatables doesn't have detail row. Please help me arjay, thanks in advance.
i don't know how to fix this. Thanks for ur answer arjay.
Is the number of columns changing? I'm having the same problem, but it seems like it only occurs when the number of columns changes. For some reason, dataTables is keeping remnants of the number of columns from the previous iteration, and not destroying the previous table. I do have destroy set to true.
Sorry for late response. In my opinion, this is indeed related to the number of columns. Make sure you have the same number of <th>
and <td>
on your html.
The issue for me was that remnants of the columns hang around, so I had to destroy those remnants:
var myDataTable = $("#" + this.options.id).DataTable(myOptions);
myDataTable.destroy(true);
const tableNode = $("<table id='164154654'></table>")
$(someContainer).append(tableNode);
I saved the table node, destroyed it completely, then recreated it and that resolved my issues.
my problem is still exists. so i think im not going to use this feature. hehe
Thanks for the response.
@nusendra
put <th></th>
in your table
and use like this
`function format(d) {
// console.log(d);
var data = "
ID | " +Data Início | " +Validado | " +Procedimentos | " +Morada | " +Obs Geral | " +Pagamentos | " +Emitido | " +
Most helpful comment
Sorry for late response. In my opinion, this is indeed related to the number of columns. Make sure you have the same number of
<th>
and<td>
on your html.