Datatables: Kann die Eigenschaft 'mData' von 'undefined' nicht lesen.

Question

Ich habe ein Problem mit Datatables. Ich habe auch diesen Link durchgelesen, der keine Ergebnisse lieferte. Ich habe alle erforderlichen Voraussetzungen eingefügt, wo ich Daten direkt in das DOM parsen.

Skript

$(document).ready(function() {
  $('.viewCentricPage .teamCentric').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bPaginate": false,
    "bFilter": true,
    "bSort": true,
    "aaSorting": [
      [1, "asc"]
    ],
    "aoColumnDefs": [{
      "bSortable": false,
      "aTargets": [0]
    }, {
      "bSortable": true,
      "aTargets": [1]
    }, {
      "bSortable": false,
      "aTargets": [2]
    }],
  });
});

Answer 1

Zur Info: dataTables benötigt eine wohlgeformte Tabelle. Sie muss die Tags und enthalten, ansonsten wird dieser Fehler geworfen. Überprüfen Sie außerdem, dass alle Ihre Zeilen, einschließlich der Kopfzeile, die gleiche Anzahl von Spalten haben.

Das Folgende führt zu einem Fehler (keine und Tags)

        Titel-1
        Titel-2

        Daten-1
        Daten-2

Das Folgende führt ebenfalls zu einem Fehler (ungleiche Anzahl von Spalten)

            Titel-1
            Titel-2

            Daten-1
            Daten-2
            Daten-3

Weitere Informationen finden Sie hier

Answer 2

Eine häufige Ursache für Cannot read property 'fnSetData' of undefined ist die nicht übereinstimmende Anzahl von Spalten, wie in diesem fehlerhaften Code:

        Rep    
        Titel

        Rep
        Titel
        Fehlendes entsprechendes th

Während der folgende Code mit einem pro (Anzahl der Spalten muss übereinstimmen.) funktioniert:

        Rep       
        Titel     
        Added th  

        Rep             
        Titel           
        th jetzt vorhanden  

Der Fehler tritt auch auf, wenn ein wohlgeformtes thead mit einem colspan, aber ohne zweite Zeile verwendet wird.

Für eine Tabelle mit 7 Spalten funktioniert das Folgende nicht und wir sehen "Cannot read property 'mData' of undefined" in der JavaScript-Konsole:

        Rep
        Titel
        Download

Während dies funktioniert:

        Rep
        Titel
        Download

        pdf
        nwc
        nwctxt
        mid
        xml

Answer 3

Das haben und mit der gleichen Anzahl von und hat mein Problem gelöst.

Answer 4

Ich hatte dasselbe Problem beim Verwenden von DOM-Daten in einer Rails-Ansicht, die über den Scaffold-Generator erstellt wurde. Standardmäßig lässt die Ansicht -Elemente für die letzten drei Spalten aus (die Links zum Anzeigen, Ausblenden und Löschen von Datensätzen enthalten). Ich habe festgestellt, dass das Problem behoben wurde, wenn ich Titel für diese Spalten in einem -Element innerhalb des hinzufügte.

Ich kann nicht sagen, ob dies dasselbe Problem ist, das Sie haben, da ich Ihr HTML nicht sehen kann. Falls es nicht dasselbe Problem ist, können Sie den Chrome-Debugger verwenden, um herauszufinden, an welcher Spalte ein Fehler auftritt, indem Sie auf den Fehler in der Konsole klicken (dies wird Sie zum Code führen, auf dem der Fehler auftritt), dann einen bedingten Haltepunkt hinzufügen (bei col==undefined). Wenn der Halt erfolgt, können Sie die Variable i überprüfen, um festzustellen, an welcher Spalte Sie sich gerade befinden, was Ihnen dabei helfen kann, herauszufinden, was an dieser Spalte im Vergleich zu den anderen anders ist. Hoffe das hilft!

Answer 5

Dies kann auch auftreten, wenn Sie Tabellenargumente für Dinge wie 'aoColumns':[..] haben, die nicht mit der richtigen Anzahl von Spalten übereinstimmen. Probleme wie diese können häufig auftreten, wenn Sie Code von anderen Seiten kopieren, um Ihre Datatables-Integration schnell zu starten.

Beispiel:

Dies funktioniert nicht:

            Spalte 1
            Spalte 2

        Daten 1
        Daten 2

        var dTable = $('#dtable');
        dTable.DataTable({
            'order': [[ 1, 'absteigend' ]],
            'aoColumns': [
                null,
                null,
                null,
                null,
                null,
                null,
                {
                    'bSortable': false
                }
            ]
        });

Aber dies wird funktionieren:

            Spalte 1
            Spalte 2

        Daten 1
        Daten 2

        var dTable = $('#dtable');
        dTable.DataTable({
            'order': [[ 0, 'absteigend' ]],
            'aoColumns': [
                null,
                {
                    'bSortable': false
                }
            ]
        });