J'ai une ligne de détails avec des tables de données. La ligne de détails fonctionne correctement, mais lorsque je vais sur l'autre page, l'erreur apparaît.
Ici mon 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>
Mon 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');
}
});
Si je reste sur une page et que j'accède aux datatables, tout fonctionne très bien. Mais quand je vais sur l'autre page, cette erreur se produit
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)
Quand je supprime ça
{
"className": 'details-control',
"orderable": false,
"searchable": false,
"data": null,
"defaultContent": ''
},
l'erreur a disparu, mais ma table n'a pas de ligne enfant / ligne de détail. S'il vous plaît aidez-moi Arjay
Merci pour les merveilleuses tables de données.
Utilisez-vous d'autres extensions de dataTable comme la pagination? Je pense que j'ai rencontré cela avant et que je l'ai corrigé en supprimant certaines extensions.
Je n'utilise pas d'autres extensions de tables de données. J'utilise le modèle SmartAdmin, il inclut déjà des tables de données.
Je supprime tous les datatables js dans ce modèle et en utilisant les datatables yajra.
Je donne un exemple. Ici, vérifiez ma capture d'écran, j'espère que vous pourrez m'aider à résoudre ce problème :)
Ceci est une page vierge. Il n'y a rien ici...
Ceci est la page des tables de données. Premier chargement (ou premier chargement depuis une autre page). Cette datatables fonctionne parfaitement.
Ensuite, je vais à l'autre page. Pour une vérification facile, passons à la page blanche. Et l'erreur apparaît. La page vierge se transforme en page de tables de données, sans données.
{
"className": 'details-control',
"orderable": false,
"searchable": false,
"data": null,
"defaultContent": ''
},
Si je supprime cela, evertyhing fonctionne bien, mais les tables de données n'ont pas de ligne de détail. S'il vous plaît aidez-moi arjay, merci d'avance.
je ne sais pas comment résoudre ce problème. Merci pour votre réponse arjay.
Le nombre de colonnes change-t-il? J'ai le même problème, mais il semble que cela ne se produise que lorsque le nombre de colonnes change. Pour une raison quelconque, dataTables conserve les restes du nombre de colonnes de l'itération précédente et ne détruit pas la table précédente. J'ai détruit réglé sur vrai.
Désolé pour la réponse tardive. À mon avis, cela est en effet lié au nombre de colonnes. Assurez-vous d'avoir le même nombre de <th>
et <td>
sur votre html.
Le problème pour moi était que les restes des colonnes traînaient, alors j'ai dû les détruire:
var myDataTable = $("#" + this.options.id).DataTable(myOptions);
myDataTable.destroy(true);
const tableNode = $("<table id='164154654'></table>")
$(someContainer).append(tableNode);
J'ai enregistré le nœud de table, je l'ai détruit complètement, puis je l'ai recréé et cela a résolu mes problèmes.
mon problème existe toujours. donc je pense que je ne vais pas utiliser cette fonctionnalité. hehe
Merci pour la réponse.
@nusendra
mettez <th></th>
dans votre table
et utiliser comme ça
`format de fonction (d) {
// console.log (d);
var data = "
ID | "+Date de début | "+Validé | "+Procédures | "+adresse | "+Obs générale | "+Paiements | "+Publié | "+
merci @gordett. Je n'utilise plus de tables de données. Je construis mon propre composant de table avec vuejs
Merci pour votre réponse
Salut, j'ai le problème d'utiliser jquery datatable en angular.Le problème est que mon th et td proviennent tous deux de l'API mais cela fonctionne correctement pour la première fois et la deuxième fois, il affiche des données correctes, mais le filtre et la recherche ne fonctionneront que pour les données précédentes.
N'importe qui peut aider à résoudre ce problème.
utiliser tabledestroy
if ($ .fn.DataTable.isDataTable ('# matable2'))
{
$ ('# mytable2'). DataTable (). destroy ();
}
$ ('# mytable2 tbody'). empty ();
Commentaire le plus utile
Désolé pour la réponse tardive. À mon avis, cela est en effet lié au nombre de colonnes. Assurez-vous d'avoir le même nombre de
<th>
et<td>
sur votre html.