Laravel-datatables: No se puede leer la propiedad 'estilo' de indefinido en filas de detalles

Creado en 12 jun. 2017  ·  10Comentarios  ·  Fuente: yajra/laravel-datatables

Resumen del problema o solicitud de función

Tengo una fila de detalles con tablas de datos. La fila de detalles funciona correctamente, pero cuando voy a la otra página aparece el error.

Fragmento de código del problema

Aquí mi 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>

Mi 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

Si me quedo en una página y accedo a las tablas de datos, todo funciona bien. Pero cuando voy a la otra página, aparece este 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)

Cuando elimino esto

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

el error ha desaparecido, pero mi tabla no tiene fila secundaria / fila de detalles. Por favor ayúdame Arjay
Gracias por maravillosas tablas de datos.

Detalles del sistema

  • Sistema operativo: Windows 10
  • Versión PHP: 5 ++
  • Versión de Laravel: 5.4
  • Versión de Laravel-Datatables: 7.7
javascript question

Comentario más útil

Perdón por la respuesta tardía. En mi opinión, esto está relacionado con el número de columnas. Asegúrese de tener el mismo número de <th> y <td> en su html.

Todos 10 comentarios

¿Está utilizando otras extensiones de dataTable como la paginación? Creo que encontré esto antes y lo arreglé eliminando algunas extensiones.

No estoy usando otras extensiones de tablas de datos. Estoy usando la plantilla SmartAdmin, ya incluye tablas de datos.
Elimino todas las tablas de datos js en esta plantilla y uso las tablas de datos yajra.

Doy un ejemplo. Aquí mira mi captura de pantalla, espero que puedas ayudarme a solucionar esto :)
754pelx2axul 1
Esta es una página en blanco. No hay nada aquí...

k71k9vk2vgj3 2
Esta es la página de tablas de datos. Primero cargue (o cargue primero desde otra página). Esta tabla de datos funciona perfectamente.

zdhkg6mqy5x7
Luego voy a la otra página. Para una verificación fácil, vayamos a la página en blanco. Y el error se nota. La página en blanco se convierte en una página de tablas de datos, sin datos.


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

Si elimino esto, todo funciona bien, pero las tablas de datos no tienen una fila de detalles. Por favor ayúdame arjay, gracias de antemano.
No sé cómo arreglar esto. Gracias por tu respuesta arjay.

¿Está cambiando el número de columnas? Tengo el mismo problema, pero parece que solo ocurre cuando cambia el número de columnas. Por alguna razón, dataTables mantiene restos del número de columnas de la iteración anterior y no destruye la tabla anterior. Tengo destruir establecido en verdadero.

Perdón por la respuesta tardía. En mi opinión, esto está relacionado con el número de columnas. Asegúrese de tener el mismo número de <th> y <td> en su html.

El problema para mí fue que los restos de las columnas cuelgan, así que tuve que destruir esos restos:

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

Guardé el nodo de la tabla, lo destruí por completo, luego lo recreé y eso resolvió mis problemas.

mi problema sigue existiendo. así que creo que no voy a utilizar esta función. jeje

Gracias por la respuesta.

@nusendra

pon <th></th> en tu mesa


y usa así

`formato de función (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;

}

'

CARNÉ DE IDENTIDADFecha de inicioValidadoProcedimientoshabla aObservaciones generalesPagosEmitido

gracias @gordett. Ya no uso tablas de datos. Estoy construyendo mi propio componente de tabla con vuejs

gracias por su respuesta

Hola, tengo el problema de usar jquery datatable en angular. El problema es que mi th y td son ambos de API pero funciona correctamente por primera vez y la segunda vez muestra datos correctos, pero el filtro y la búsqueda funcionarán solo para datos anteriores.
Cualquiera puede ayudar a resolver este problema.

usar tabledestroy

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

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

kamrava picture kamrava  ·  3Comentarios

jgatringer picture jgatringer  ·  3Comentarios

SGarridoDev picture SGarridoDev  ·  3Comentarios

jackrsantana picture jackrsantana  ·  3Comentarios

t0n1zz picture t0n1zz  ·  3Comentarios