Cannot read property 'style' of undefined on Detail Rows #1201

Summary of problem or feature request I have a details row with datatables. Details row is working properly, but when i go to the other page the error comes up.                                       Code snippet of problem 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'); } }); Note 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. System details Operating System : Windows 10 PHP Version : 5++ Laravel Version : 5.4 Laravel-Datatables Version : 7.7

 

 

Owner

yajra commented on Jun 20, 2017

Are you using some other extensions of dataTable like pagination? I think I encountered this before and fixed it by removing some extensions.

 

 

Author

nusendra commented on Jun 22, 2017 • 

edited 

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.

 

 

stevelacerda7 commented on Sep 14, 2017 • 

edited 

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.

 

 

 

Owner

yajra commented on Sep 15, 2017

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.

 

 yajra added javascript question labels on Sep 15, 2017

 

 

stevelacerda7 commented on Sep 15, 2017 • 

edited 

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.

 

 

 

Author

nusendra commented on Sep 15, 2017

my problem is still exists. so i think im not going to use this feature. hehe Thanks for the response.

 

 nusendra closed this on Sep 15, 2017

 

 

gordett commented on May 2, 2018 • 

edited 

@nusendra put <th></th> in your table and use like this `function format(d) { // console.log(d); var data = " " + "" + "" + "" + "" + "" + "" + "" + "" + //"" + ""; $(d.fornecedores).each(function (key, value) { // $(value.pagamentos).each(function (key, value1) { // console.log(value1.html); // }); data += '<tr>' + '<td>' + value.nome + '</td>' + '<td>' + value.nome + '</td>' + '<td>' + value.nome + '</td>' + '<td>' + value.nome + '</td>' + '<td>' + value.nome + '</td>' + '<td>' + value.nome + '</td>' + '<td>' + value.nome + '</td>' + //'<td>' + value.emitido + '</td>' + '</tr>'; }); return data; } ` ID Data Início Validado Procedimentos Morada Obs Geral Pagamentos Emitido

 

 

Author

nusendra commented on May 4, 2018

thanks @gordett. im not using datatables anymore. I'm build my own table component with vuejs thanks for your reply

 

 

vijayvargiyakhushboo commented on May 10

Hi, I have the issue of using jquery datatable in angular.The issue is my th and td both are from API but it works properly for first time and second time its shows correct data but the filter and search will work for previous data only. Anyone can help to solve this issue.