Laravel-datatables: Cannot read property 'style' of undefined on Detail Rows

Created on 12 Jun 2017  ·  10Comments  ·  Source: yajra/laravel-datatables

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
javascript question

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.

All 10 comments

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 :)
754pelx2axul 1
This is blank page. There is nothing here...

k71k9vk2vgj3 2
This is datatables page. First load (or first load from other page). This datatables works perfectly.

zdhkg6mqy5x7
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 = "

" +
"" +
"" +
"" +
"" +
"" +
"" +
"" +
"" +
//"" +
"";

$(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;

}

`

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

thanks for your reply

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.

use tabledestroy

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sangnguyenplus picture sangnguyenplus  ·  3Comments

nasirkhan picture nasirkhan  ·  3Comments

hari-web picture hari-web  ·  3Comments

kamrava picture kamrava  ·  3Comments

ghost picture ghost  ·  3Comments
bleepcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners.
Source for this page: Source

Popular programming languages
Popular GitHub projects
More GitHub projects

© 2024 bleepcoder.com - Contact
Made with in the Dominican Republic.
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
IDData InícioValidadoProcedimentosMoradaObs GeralPagamentosEmitido