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.
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');
}
});
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.
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 :)
Esta é uma página em branco. Não há nada aqui...
Esta é a página de tabelas de dados. Primeiro carregamento (ou primeiro carregamento de outra página). Essas tabelas de dados funcionam perfeitamente.
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 = "
ID | " +Data Início | " +Validado | " +Procedimentos | " +Morada | " +Obs Geral | " +Pagamentos | " +Emitido | " +
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 ();
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.