Laravel-datatables: Não é possível ler 'estilo' de propriedade de indefinido nas linhas de detalhe

Criado em 12 jun. 2017  ·  10Comentários  ·  Fonte: yajra/laravel-datatables

Resumo do problema ou solicitação de recurso

Eu tenho uma linha de detalhes com tabelas de dados. A linha de detalhes está funcionando corretamente, mas quando vou para a outra página, aparece o erro.

Fragmento de código do problema

Aqui meu 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>

Meu 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');
          }
      });

Nota

Se eu ficar em uma página e acessar as tabelas de dados, tudo funciona bem. Mas quando vou para a outra página, aparece este erro

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)

Quando eu deletar isso

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

o erro desapareceu, mas minha tabela não tem linha filha / linha de detalhe. Por favor me ajude Arjay
Obrigado por tabelas de dados maravilhosas.

Detalhes do sistema

  • Sistema operacional: Windows 10
  • Versão PHP: 5 ++
  • Versão do Laravel: 5.4
  • Versão do Laravel-Datatables: 7.7
javascript question

Comentários muito úteis

Desculpe pela resposta tardia. Na minha opinião, isso está realmente relacionado ao número de colunas. Certifique-se de ter o mesmo número de <th> e <td> em seu html.

Todos 10 comentários

Você está usando alguma outra extensão de dataTable como paginação? Acho que encontrei isso antes e resolvi removendo algumas extensões.

Não estou usando outras extensões de tabelas de dados. Estou usando o modelo SmartAdmin, já inclui tabelas de dados.
Eu removo todos os datatables js neste modelo, e usando datatables yajra.

Eu dou alguns exemplos. Aqui, verifique minha captura de tela, espero que você possa me ajudar a consertar isso :)
754pelx2axul 1
Esta é uma página em branco. Não há nada aqui...

k71k9vk2vgj3 2
Esta é a página de tabelas de dados. Primeiro carregamento (ou primeiro carregamento de outra página). Essas tabelas de dados funcionam perfeitamente.

zdhkg6mqy5x7
Em seguida, vou para a outra página. Para uma verificação fácil, vamos para a página em branco. E o erro aparece. A página em branco se transforma em página de datatables, sem dados.


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

Se eu excluir isso, tudo funcionará bem, mas as tabelas de dados não têm linha de detalhes. Por favor me ajude Arjay, obrigado antecipadamente.
eu não sei como consertar isso. Obrigado pela sua resposta, Arjay.

O número de colunas está mudando? Estou tendo o mesmo problema, mas parece que só ocorre quando o número de colunas muda. Por alguma razão, dataTables está mantendo os restos do número de colunas da iteração anterior e não destruindo a tabela anterior. Eu tenho destruir definido como verdadeiro.

Desculpe pela resposta tardia. Na minha opinião, isso está realmente relacionado ao número de colunas. Certifique-se de ter o mesmo número de <th> e <td> em seu html.

O problema para mim era que os restos das colunas permaneciam por aí, então eu tive que destruir esses restos:

var myDataTable = $("#" + this.options.id).DataTable(myOptions);
myDataTable.destroy(true);
const tableNode = $("<table id='164154654'></table>")
$(someContainer).append(tableNode);

Salvei o nó da tabela, destruí-o completamente e, em seguida, recriei-o e isso resolveu meus problemas.

meu problema ainda existe. então eu acho que não vou usar esse recurso. ele Ele

Obrigado pela resposta.

@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;

}

`

IDData InícioValidadoProcedimentosMoradaObs GeralPagamentosEmitido

obrigado @gordett. Não estou usando mais tabelas de dados. Estou construindo meu próprio componente de mesa com vuejs

Obrigado pela sua resposta

Oi, eu tenho o problema de usar a tabela de dados jquery no angular. O problema é meu th e td são da API, mas funciona corretamente pela primeira vez e pela segunda vez mostra os dados corretos, mas o filtro e a pesquisa funcionarão apenas para os dados anteriores.
Qualquer pessoa pode ajudar a resolver este problema.

usar tabledestroy

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

Esta página foi útil?
0 / 5 - 0 avaliações