Ich habe eine Detailzeile mit Datentabellen. Die Detailzeile funktioniert ordnungsgemäß, aber wenn ich zur anderen Seite gehe, tritt der Fehler auf.
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');
}
});
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.
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 :)
Dies ist eine leere Seite. Hier ist nichts...
Dies ist eine Seite mit Datentabellen. Erstes Laden (oder erstes Laden von einer anderen Seite). Diese Datentabellen funktionieren einwandfrei.
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 = "
ICH WÜRDE | "+Startdatum | "+Bestätigt | "+Verfahren | "+Adresse | "+General Obs | "+Zahlungen | "+Ausgegeben | "+
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 ();
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.