Cannot read property 'style' of undefined on Details Row

andraeinstein

I have a details row with datatables. Details row is working properly, but when i go to the other page this 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>

My JS

$('#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,
    });

    function format ( d ) {
    // `d` is the original data object for the row
          return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
              '<tr>'+
                  '<td>Full name:</td>'+
                  '<td>a</td>'+
              '</tr>'+
              '<tr>'+
                  '<td>Extension number:</td>'+
                  '<td>b</td>'+
              '</tr>'+
              '<tr>'+
                  '<td>Extra info:</td>'+
                  '<td>And any further details here (images etc)...</td>'+
              '</tr>'+
          '</table>';
      }

$(document).ready(function() {
      event.preventDefault();
      var table = $('#dt_basic').DataTable();
      var data;
      var SimpanOrEdit;

      $('#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( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );

} );

if i stay in this page, i can reload and access the datatables. It's working
But when i going to the other page, i got this error

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)

---

If i remove this in my js

           {
                "className":      'details-control',
                "orderable":      false,
                "searchable":     false,
                "data":           null,
                "defaultContent": ''
            },

Everythings work fine. But my table doesnt have row details

Im using Laravel. I have tried to use Yajra and i got the same error. Please help me. Thanks in advance ...

bindrid

is your target 'datatables/dataBank' configured to handle the paging calls?

allan

Sounds like the server-side processing script might not be able to handle the empty column. Although its odd that it would work on the first call and not the second.

Allan

andraeinstein

@bindrid how to configure the ajax target handle paging calls? Im using laravel. And it's work for the first load. But, when i going to the other page, i got that problem

Do you mean this? https://laravel.com/docs/5.4/pagination

@allan i have another clue. For the first load, this datatables is working properly. Then im going to the blank page of my web for testing, and this error comes up. In my blank page, the empy table appears. Just table without data.

Thanks for the answers, and sorry for bad english
Nusendra.

allan

Can you link to a page showing the issue please? I don't quite understand what you mean by a black page and how that would effect the server-side processing script.

Allan

andraeinstein

@allan thanks for the asnwer. Its not black, but blank hehe. Here check my screenshot

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.

If i delete this

{
                "className":      'details-control',
                "orderable":      false,
                "searchable":     false,
                "data":           null,
                "defaultContent": ''
            },

Evertyhing works fine, but datatables doesn't have detail row. Please help me allan, thanks in advance.

Nusendra. H

allan

Ooops - sorry. I did mean "blank".

I still don't quite get it though. Is this a single app application? It sounds like a destroy issue, but without a test case it is really hard to say.

Allan

andraeinstein

@allan do u mean single page application? No this isn't

im already following the tutorial, in yajra too. But the error still exists. thanks for ur answer, i will try to find out myself.

Thanks allan

Bain McKay

I have this problem as well. Nothing I've done so far can resolve. Any guidance?

allan

@Bain McKay - Can you link to a page showing the issue please?

Allan

Bain McKay

I solve it. I had two TableIds the same in an Angular Modal Template List. It was picking up the first one, which did not have the same Table Columns, and therefore threw the style exception.