Laravel-datatables: Impossible de lire la propriété 'style' non définie sur les lignes de détail

Créé le 12 juin 2017  ·  10Commentaires  ·  Source: yajra/laravel-datatables

Résumé du problème ou de la demande de fonctionnalité

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.

Extrait de code du problème

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

Remarque

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.

Détails du système

  • Système d'exploitation: Windows 10
  • Version PHP: 5 ++
  • Version de Laravel: 5.4
  • Version Laravel-Datatables: 7.7
javascript question

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.

Tous les 10 commentaires

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 :)
754pelx2axul 1
Ceci est une page vierge. Il n'y a rien ici...

k71k9vk2vgj3 2
Ceci est la page des tables de données. Premier chargement (ou premier chargement depuis une autre page). Cette datatables fonctionne parfaitement.

zdhkg6mqy5x7
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 = "

"+
""+
" "+
" "+
" "+
" "+
" "+
" "+
" "+
// " "+
" ";
$(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;

}

»

IDDate de débutValidéProcéduresadresseObs généralePaiementsPublié

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 ();

Cette page vous a été utile?
0 / 5 - 0 notes