Cannot read property 'style' of undefined on Detail Rows

[nusendra]

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

[yajra]

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

[nusendra]

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]

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.

[yajra]

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.

[stevelacerda7]

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.

[nusendra]

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

Thanks for the response.

[gordett]

@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

[nusendra]

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

thanks for your reply

[vijayvargiyakhushboo]

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.

[searchforappali]

use tabledestroy

if ( $.fn.DataTable.isDataTable('#mytable2') )
{
$('#mytable2').DataTable().destroy();
}
$('#mytable2 tbody').empty();