DataTables: Die Eigenschaft 'Länge' von undefined kann nicht gelesen werden

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

Zur Verdeutlichung verwende ich

• PHP Codeigniter
• Materliazecss

Ich habe auch sichergestellt, dass ich das JSON-Array korrekt empfangen 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.readyFunktion:

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

Der Fehler, den ich bekomme, ist

Nicht erfasster TypeError: Die Eigenschaft 'Länge' von undefined kann nicht gelesen werden

URSACHE

Dieser Fehler TypeError: Cannot read property 'length' of undefinedbedeutet 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. Ein Fehler tritt auf, weil Daten in einem anderen als dem Standardformat 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 die ajax.dataSrcOption, um Dateneigenschaften zu definieren, die Tabellendaten in der Ajax-Antwort enthalten ( datastandardmäßig).

Siehe Datenfeldposition für weitere Informationen.

LINKS

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

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

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

Siehe Ajax-Optionen

OK, danke an alle für die Hilfe.

Das Problem war jedoch viel einfacher.

Alles, was ich tun muss, ist, meinen JSON zu reparieren, um das Array einem Attribut namens data wie folgt zuzuweisen.

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

Versuchen Sie Folgendes: Die Rückgabe muss d sein, nicht d.data

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

Wenn Sie Ajax als Funktion verwenden, denken Sie daran, dass JSON-Daten mit festgelegten Parametern zurückgegeben werden.

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

Wenn Sie über JSON-Daten verfügen, wird der folgende Fehler angezeigt

Eine bessere Lösung besteht darin, ein var datafür das lokale JSON-Array-Objekt zuzuweisen. Details finden Sie unter: https://datatables.net/manual/tech-notes/4

Auf diese Weise können Sie den Tabelleninhalt anzeigen.

 $(document).ready(function(){   

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

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

In meinem Fall hatte ich meine Json ein Attribut zuweisen genannt aaData wie in Datentabellen Ajax - Beispiel , die aussahen Daten dies .

Dies kann passieren, wenn der Name Ihrer Ansichtseigenschaft und der Name im Spaltenabschnitt der Datentabelle nicht übereinstimmen. Stellen Sie sicher, dass der Name der Eigenschaft und der Name der Spaltendaten übereinstimmen

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

Sie können versuchen, Ihre Felder auszuchecken, während Sie ein E-Mail-Feld rendern, das in Ihrem Ajax nicht verfügbar ist

$.ajax({
  url: "url",
  type: 'GET',
  success: function(data) {
    var new_data = {
      "data": data
    };
    console.log(new_data);
  }
});