Laravel-datatables: Die Eigenschaft 'style' von undefined in Detailzeilen kann nicht gelesen werden

Erstellt am 12. Juni 2017  ·  10Kommentare  ·  Quelle: yajra/laravel-datatables

Zusammenfassung des Problems oder der Funktionsanforderung

Ich habe eine Detailzeile mit Datentabellen. Die Detailzeile funktioniert ordnungsgemäß, aber wenn ich zur anderen Seite gehe, tritt der Fehler auf.

Code-Snippet des Problems

Hier mein 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>

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

Hinweis

Wenn ich auf einer Seite bleibe und auf die Datentabellen zugreife, funktioniert alles einwandfrei. Aber wenn ich auf die andere Seite gehe, tritt dieser Fehler auf

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)

Wenn ich das lösche

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

Der Fehler ist verschwunden, aber meine Tabelle hat keine untergeordnete Zeile / Detailzeile. Bitte hilf mir, Arjay
Vielen Dank für wundervolle Daten.

Systemdetails

  • Betriebssystem: Windows 10
  • PHP-Version: 5 ++
  • Laravel Version: 5.4
  • Laravel-Datatables Version: 7.7
javascript question

Hilfreichster Kommentar

Entschuldigung für die späte Antwort. Meiner Meinung nach hängt dies tatsächlich mit der Anzahl der Spalten zusammen. Stellen Sie sicher, dass Sie die gleiche Anzahl von <th> und <td> in Ihrem HTML-Code haben.

Alle 10 Kommentare

Verwenden Sie andere Erweiterungen von dataTable wie die Paginierung? Ich glaube, ich bin dem schon einmal begegnet und habe es behoben, indem ich einige Erweiterungen entfernt habe.

Ich verwende keine anderen Datatables-Erweiterungen. Ich verwende eine SmartAdmin-Vorlage, die bereits Datentabellen enthält.
Ich entferne alle Datentabellen js in dieser Vorlage und verwende Yajra-Datentabellen.

Ich mache ein Beispiel. Hier schau dir meinen Screenshot an, hoffe du kannst mir helfen das zu beheben :)
754pelx2axul 1
Dies ist eine leere Seite. Hier ist nichts...

k71k9vk2vgj3 2
Dies ist eine Seite mit Datentabellen. Erstes Laden (oder erstes Laden von einer anderen Seite). Diese Datentabellen funktionieren einwandfrei.

zdhkg6mqy5x7
Dann gehe ich auf die andere Seite. Zur einfachen Überprüfung gehen wir zur leeren Seite. Und der Fehler zeigt. Eine leere Seite wird zu einer Seite mit Datentabellen ohne Daten.


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

Wenn ich dies lösche, funktioniert alles einwandfrei, aber Datentabellen haben keine Detailzeile. Bitte helfen Sie mir arjay, danke im Voraus.
Ich weiß nicht, wie ich das beheben soll. Danke für deine Antwort arjay.

Ändert sich die Anzahl der Spalten? Ich habe das gleiche Problem, aber es scheint, dass es nur auftritt, wenn sich die Anzahl der Spalten ändert. Aus irgendeinem Grund behält dataTables Reste der Anzahl der Spalten aus der vorherigen Iteration bei und zerstört die vorherige Tabelle nicht. Ich habe Zerstörung auf wahr gesetzt.

Entschuldigung für die späte Antwort. Meiner Meinung nach hängt dies tatsächlich mit der Anzahl der Spalten zusammen. Stellen Sie sicher, dass Sie die gleiche Anzahl von <th> und <td> in Ihrem HTML-Code haben.

Das Problem für mich war, dass Reste der Säulen herumhängen, also musste ich diese Überreste zerstören:

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

Ich habe den Tabellenknoten gespeichert, ihn vollständig zerstört und dann neu erstellt, wodurch meine Probleme behoben wurden.

Mein Problem besteht immer noch. Ich denke, ich werde diese Funktion nicht verwenden. hehe

Danke für die Antwort.

@nusendra

Lege <th></th> in deine Tabelle


und so verwenden

`Funktionsformat (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;

}}

`

ICH WÜRDEStartdatumBestätigtVerfahrenAdresseGeneral ObsZahlungenAusgegeben

danke @gordett. Ich benutze keine Datentabellen mehr. Ich baue meine eigene Tabellenkomponente mit vuejs

Danke für deine Antwort

Hallo, ich habe das Problem, jquery datatable in angle zu verwenden. Das Problem ist, dass mein th und td beide von der API stammen, aber es funktioniert beim ersten und zweiten Mal ordnungsgemäß, zeigt korrekte Daten an, aber der Filter und die Suche funktionieren nur für vorherige Daten.
Jeder kann helfen, dieses Problem zu lösen.

benutze tabledestroy

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

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

hohuuhau picture hohuuhau  ·  3Kommentare

ahmadbadpey picture ahmadbadpey  ·  3Kommentare

sangnguyenplus picture sangnguyenplus  ·  3Kommentare

nasirkhan picture nasirkhan  ·  3Kommentare

kamrava picture kamrava  ·  3Kommentare