web-dev-qa-db-ger.com

DataTables: Eigenschaft 'length' von undefined kann nicht gelesen werden

Ich verstehe, dass dies ein beliebtes Problem ist, und ich habe alle ähnlichen Fragen hier auf Stack Overflow und anderen Websites (einschließlich der Website für Datentabellen) gelesen.

Zur Klarstellung verwende ich

  • PHP Codeigniter
  • Materliazecss

Ich habe auch sichergestellt, dass ich das JSON-Array richtig erhalten habe:

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

Meine HTML-Tabelle sieht folgendermaßen aus:

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

Und hier ist meine document.ready-Funktion:

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

Der Fehler, den ich bekomme, ist

Uncught TypeError: Eigenschaft 'length' von undefined kann nicht gelesen werden

jqueryjsoncodeigniterdatatableshtml-table
42
Abdel-Rahman Shoman

OK, vielen Dank für die Hilfe.

Das Problem war jedoch viel einfacher.

Alles was ich tun muss, ist mein JSON zu fixieren, um das Array einem Attribut namens data zuzuordnen, wie folgt.

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

Es ist noch einfacher: Verwenden Sie einfach die Option dataSrc:'' in der Ajax-Definition, sodass dataTable ein Array anstelle eines Objekts erwartet:

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

Siehe ajax-Optionen

59
tomsoft

Versuchen Sie es wie folgt: Die Rückgabe muss d sein, nicht d.data

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

URSACHE

Dieser Fehler TypeError: Cannot read property 'length' of undefined bedeutet normalerweise, dass jQuery DataTables die Daten in der Antwort auf die Ajax-Anforderung nicht finden kann.

Standardmäßig erwartet jQuery DataTables, dass die Daten in einem der unten gezeigten Formate vorliegen. Fehler tritt auf, weil Daten in einem anderen Format als Standard zurückgegeben werden.

Array von Arrays

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

Array von Objekten

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

LÖSUNG

Verwenden Sie das Standardformat oder verwenden Sie die Option ajax.dataSrc , um die Dateneigenschaft mit Tabellendaten in der Ajax-Antwort zu definieren (standardmäßig data).

Weitere Informationen finden Sie unter Speicherort für Datenarray .

LINKS

Weitere Informationen finden Sie unter jQuery DataTables: Häufige JavaScript-Konsolenfehler .

9
Gyrocode.com

Wenn Sie über JSON-Daten verfügen, wird der folgende Fehler angezeigt enter image description here

Eine bessere Lösung ist die Zuweisung eines var data für das lokale Json-Array-Objekt Details siehe: https://datatables.net/manual/tech-notes/4

Dies hilft Ihnen bei der Anzeige von Tabelleninhalten. 

 $(document).ready(function(){   

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

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

Wenn Sie ajax als Funktion verwenden, denken Sie daran, dass JSON-Daten mit den gesetzten Parametern an sie zurückgegeben werden.

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

Während die obigen Antworten die Situation gut beschreiben, überprüfen Sie bei der Problembehandlung auch, dass der Browser wirklich das Format erhält, das DataTables erwartet. Es kann andere Gründe geben, die data nicht zu bekommen. Zum Beispiel, wenn der Benutzer keinen Zugriff auf die Daten-URL hat und stattdessen etwas HTML erhält. Oder das Remote-System hat einige unglückliche "Reparaturen". Die Registerkarte Netzwerk in den Debug-Tools des Browsers hilft.

0
Roman Susi

In meinem Fall musste ich meinen Json einem Attribut namens aaData zuweisen, genau wie in Datatables ajax-Beispiel welche Daten wie dies aussahen.

0
Haris ur Rehman