web-dev-qa-db-fra.com

DataTables: impossible de lire la propriété 'longueur' de non définie

Je comprends cela comme un problème populaire et j'ai lu toutes les questions similaires ici sur Stack Overflow et sur d'autres sites (y compris le site Web Datatables).

Pour clarifier, j'utilise

  • PHP Codeigniter
  • Materliazecss

Je me suis également assuré que j'avais bien reçu le tableau JSON:

[{"name_en":"hello","phone":"55555555"},{"name_en":"hi","phone":"00000000"}]

Mon tableau HTML ressemble à ceci:

<table id="customer_table">
     <thead>
         <tr>
            <th>Name</th>
            <th>Phone</th>
         </tr>
     </thead>
</table>

Et voici ma fonction document.ready:

  $(document).ready(function(){
            //$('#customer_table').DataTable();
            $('#customer_table').DataTable( {
                "ajax": 'json',
                "dataSrc": "",
                 "columns": [
                    { "data": "email" },
                    { "data": "name_en" }
                ]
            });
  });

L'erreur que je reçois est

Uncaught TypeError: Impossible de lire la propriété 'longueur' de non définie

jqueryjsoncodeigniterdatatableshtml-table
42
Abdel-Rahman Shoman

OK, merci à tous pour l'aide.

Cependant, le problème était beaucoup plus facile que cela.

Tout ce que je dois faire est de corriger mon JSON pour affecter le tableau à un attribut appelé data, comme suit.

{
  "data": [{
    "name_en": "hello",
    "phone": "55555555",
    "email": "a.shouman",
    "facebook": "https:\/\/www.facebook.com"
  }, ...]
}
31
Abdel-Rahman Shoman

C'est encore plus simple: utilisez simplement l'option dataSrc:'' dans la définition ajax pour que dataTable sache s'attendre à un tableau plutôt qu'à un objet:

    $('#pos-table2').DataTable({
                  processing: true,
                  serverSide: true,
                  ajax:{url:"pos.json",dataSrc:""}
            }
    );

Voir options ajax

59
tomsoft

Essayez comme suit le retour doit être d, pas d.data

 ajax: {
      "url": "xx/xxx/xxx",
      "type": "GET",
      "error": function (e) {
      },
      "dataSrc": function (d) {
         return d
      }
      },
11
Nisal Edu

CAUSE

Cette erreur TypeError: Cannot read property 'length' of undefined signifie généralement que jQuery DataTables ne peut pas trouver les données dans la réponse à la demande Ajax.

Par défaut, jQuery DataTables s'attend à ce que les données soient dans l'un des formats indiqués ci-dessous. Une erreur se produit car les données sont renvoyées dans un format autre que celui par défaut.

Tableau de tableaux

{ 
   "data": [
      [
         "Tiger Nixon",
         "System Architect",
         "$320,800",
         "2011/04/25",
         "Edinburgh",
         "5421"
      ]
   ]
}

Tableau d'objets

{ 
   "data": [
      {
         "name": "Tiger Nixon",
         "position": "System Architect",
         "salary": "$320,800",
         "start_date": "2011/04/25",
         "office": "Edinburgh",
         "extn": "5421"
      }
   ]
}

SOLUTION

Utilisez le format par défaut ou utilisez ajax.dataSrc pour définir la propriété de données contenant les données de table dans la réponse Ajax (data par défaut).

Voir Emplacement du tableau de données pour plus d'informations.

LIENS

Voir jQuery DataTables: Erreurs de console JavaScript communes pour plus de détails.

9
Gyrocode.com

Lorsque vous avez des données JSON, l'erreur suivante apparaît enter image description here

Une meilleure solution consiste à attribuer un var data à l’objet tableau json local, les détails .__ voir: https://datatables.net/manual/tech-notes/4

Ceci vous aide à afficher le contenu de la table. 

 $(document).ready(function(){   

        $('#customer_table').DataTable( {
         "aaData": data,

           "aoColumns": [{
                            "mDataProp": "name_en"
                        }, {
                            "mDataProp": "phone"
                        }, {
                            "mDataProp": "email"
                        }, {
                            "mDataProp": "facebook"
                        }]
            });
        });
1
chetan

Si vous utilisez ajax en tant que fonction, rappelez-vous que les données JSON doivent y être retournées, avec les paramètres définis.

$('#example').dataTable({
    "ajax" : function (data, callback, settings) {
        callback({
            data: [...],
            recordsTotal: 40,
            recordsFiltered: 40}
            ));
    }
})
0
gvivetapl

Tandis que les réponses ci-dessus décrivent bien la situation, vérifiez le navigateur vraiment ainsi que le format attendu par DataTables. Il y a peut-être d'autres raisons de ne pas obtenir la data. Par exemple, si l'utilisateur n'a pas accès à l'URL de données et obtient du code HTML à la place. Ou le système distant a mis en place des "corrections" malheureuses. L'onglet Réseau des outils de débogage du navigateur aide.

0
Roman Susi

Dans mon cas, je devais assigner mon json à un attribut appelé aaData comme dans Datatables exemple ajax dont les données ressemblaient à this .

0
Haris ur Rehman