wake-up-neo.net

Datatables: Die Eigenschaft 'mData' von undefined kann nicht gelesen werden

Ich habe ein Problem mit Datatables. Ich habe auch diesen Link durchlaufen, der mir kein Ergebnis gebracht hat. Ich habe alle Voraussetzungen dafür angegeben, dass Daten direkt im DOM geparst werden. Helfen Sie mir bitte, dieses Problem zu beheben. 

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]
    }],
  });
});
248
Thriveni

FYI dataTables erfordert eine wohlgeformte Tabelle. Es muss <thead>- und <tbody>-Tags enthalten, andernfalls wird dieser Fehler ausgegeben. Stellen Sie außerdem sicher, dass alle Zeilen einschließlich der Kopfzeile die gleiche Anzahl von Spalten haben.

Der folgende Fehler wird ausgegeben (keine <thead>- und <tbody>-Tags)

<table id="sample-table">
    <tr>
        <th>title-1</th>
        <th>title-2</th>
    </tr>
    <tr>
        <td>data-1</td>
        <td>data-2</td>
    </tr>
</table>

Das folgende wird auch einen Fehler auslösen (ungleiche Anzahl von Spalten)

<table id="sample-table">
    <thead>
        <tr>
            <th>title-1</th>
            <th>title-2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data-1</td>
            <td>data-2</td>
            <td>data-3</td>
        </tr>
    </tbody>
</table>

Für mehr Info hier mehr lesen

520
Moses Machua

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

<thead>                 <!-- thead required -->
    <tr>                <!-- tr required -->
        <th>Rep</th>    <!-- td instead of th will also work -->
        <th>Titel</th>
                        <!-- th missing here -->
    </tr>
</thead>
<tbody>
    <tr>
        <td>Rep</td>
        <td>Titel</td>
        <td>Missing corresponding th</td>
    </tr>
</tbody>

Während der folgende Code mit one <th> pro <td>(Anzahl der Spalten muss übereinstimmen) funktioniert:

<thead>
    <tr>
        <th>Rep</th>       <!-- 1st column -->
        <th>Titel</th>     <!-- 2nd column -->
        <th>Added th</th>  <!-- 3rd column; th added here -->
    </tr>
</thead>
<tbody>
    <tr>
        <td>Rep</td>             <!-- 1st column -->
        <td>Titel</td>           <!-- 2nd column -->
        <td>th now present</td>  <!-- 3rd column -->
    </tr>
</tbody>

Der Fehler tritt auch auf, wenn ein wohlgeformter Thead mit einem Colspan verwendet wird, jedoch keine zweite Reihe.

Für eine Tabelle mit 7 Spalten funktioniert das Folgende nicht und wir sehen in der Javascript-Konsole "Kann Eigenschaft 'mData' von undefined nicht lesen":

<thead>
    <tr>
        <th>Rep</th>
        <th>Titel</th>
        <th colspan="5">Download</th>
    </tr>
</thead>

Während das funktioniert:

<thead>
    <tr>
        <th rowspan="2">Rep</th>
        <th rowspan="2">Titel</th>
        <th colspan="5">Download</th>
    </tr>
    <tr>
        <th>pdf</th>
        <th>nwc</th>
        <th>nwctxt</th>
        <th>mid</th>
        <th>xml</th>
    </tr>
</thead>
68
PaulH

Das gleiche Problem hatte ich bei der Verwendung von DOM-Daten in einer über den Gerüstgenerator erstellten Rails-Ansicht. In der Ansicht werden <th>-Elemente für die letzten drei Spalten (die Links zum Anzeigen, Ausblenden und Löschen von Datensätzen enthalten) standardmäßig weggelassen. Ich fand, dass, wenn ich Titel für diese Spalten in einem <th>-Element innerhalb von <thead> hinzufügte, das Problem behoben wurde. 

Ich kann nicht sagen, ob dies das gleiche Problem ist, das Sie haben, da ich Ihre HTML-Datei nicht sehen kann. Wenn es sich nicht um dasselbe Problem handelt, können Sie den Chrome-Debugger verwenden, um herauszufinden, in welcher Spalte ein Fehler auftritt, indem Sie auf den Fehler in der Konsole klicken (wodurch Sie zu dem Code gelangen, für den der Fehler auftritt) und anschließend eine Bedingung hinzugefügt Haltepunkt (um col==undefined). Wenn es stoppt, können Sie die Variable i überprüfen, um herauszufinden, in welcher Spalte sich die Spalte gerade befindet, in der Sie herausfinden können, was sich in dieser Spalte von den anderen unterscheidet. Hoffentlich hilft das!

debugging mData error

35
Nathan Hanna

Dies kann auch auftreten, wenn Sie Tabellenargumente für Dinge wie 'aoColumns':[..] haben, die nicht mit der richtigen Anzahl von Spalten übereinstimmen. Probleme wie dieses können im Allgemeinen beim Kopieren von Einfügungscode von anderen Seiten auftreten, um die Integration der Datenobjekte zu beschleunigen.

Beispiel:

Das funktioniert nicht:

<table id="dtable">
    <thead>
        <tr>
            <th>col 1</th>
            <th>col 2</th>
        </tr>
    </thead>
    <tbody>
        <td>data 1</td>
        <td>data 2</td>
    </tbody>
</table>
<script>
        var dTable = $('#dtable');
        dTable.DataTable({
            'order': [[ 1, 'desc' ]],
            'aoColumns': [
                null,
                null,
                null,
                null,
                null,
                null,
                {
                    'bSortable': false
                }
            ]
        });
</script>

Das wird aber funktionieren:

<table id="dtable">
    <thead>
        <tr>
            <th>col 1</th>
            <th>col 2</th>
        </tr>
    </thead>
    <tbody>
        <td>data 1</td>
        <td>data 2</td>
    </tbody>
</table>
<script>
        var dTable = $('#dtable');
        dTable.DataTable({
            'order': [[ 0, 'desc' ]],
            'aoColumns': [
                null,
                {
                    'bSortable': false
                }
            ]
        });
</script>
26
DrewT

Ein weiterer Grund dafür ist der Spaltenparameter in der DataTable-Initialisierung.

Die Anzahl der Spalten muss mit den Kopfzeilen übereinstimmen

"columns" : [ {
                "width" : "30%"
            }, {
                "width" : "15%"
            }, {
                "width" : "15%"
            }, {
                "width" : "30%"
            } ]

Ich hatte 7 Spalten

<th>Full Name</th>
<th>Phone Number</th>
<th>Vehicle</th>
<th>Home Location</th>
<th>Tags</th>
<th>Current Location</th>
<th>Serving Route</th>
9
Siddharth

Sie müssen Ihre colspan entfernen und die Anzahl der th und td muss übereinstimmen. 

8
Francisco Balam

in meinem Fall trat dieser Fehler auf, wenn ich Tabelle ohne Kopfzeile verwende

              <thead>
                   <tr>
                       <th>example</th>
                  </tr>
              </thead>
6
Asad

Etwas anderes Problem für mich von den obigen Antworten. Für mich war das HTML-Markup in Ordnung, aber eine meiner Spalten im Javascript fehlte und stimmte nicht mit der HTML-Datei überein.

d.h.

<table id="companies-index-table" class="table table-responsive-sm table-striped">

                            <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Created at</th>
                                <th>Updated at</th>
                                <th>Count</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($companies as $company)
                                <tr>
                                    <td>{{ $company->id }}</td>
                                    <td>{{ $company->name }}</td>
                                    <td>{{ $company->created_at }}</td>
                                    <td>{{ $company->updated_at }}</td>
                                    <td>{{ $company->count }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

Mein Skript: -

<script>
        $(document).ready(function() {
            $('#companies-index-table').DataTable({
                serverSide: true,
                processing: true,
                responsive: true,
                    ajax: "{{ route('admincompanies.datatables') }}",
                columns: [
                    { name: 'id' },
                    { name: 'name' },
                    { name: 'created_at' },
                    { name: 'updated_at' },     <-- I was missing this line so my columns didn't match the thead section.
                    { name: 'count', orderable: false },
                ],
            });
        });
    </script>
3
Paul Wright

In meinem Fall und mit ASP.NET GridView, UpdatePanel und mit DropDownList (mit ausgewähltem Plugin, bei dem ich den Wert mithilfe einer Javascript-Zeile auf Null zurücksetze), Ich habe diesen Fehler erhalten und alles tagelang ohne Hoffnung versucht. Das Problem war, dass der Code meines Dropdown-Codes im folgenden Code wie folgt war. Wenn ich einen Wert zweimal auswähle, um seine Aktion auf ausgewählte Rasterzeilen anzuwenden, erhalte ich diesen Fehler. Ich dachte seit Tagen, dass es sich um ein Javascript-Problem handelt (wieder in meinem Fall), und schließlich gab der Fix für den Drowpdown-Wert beim Aktualisierungsvorgang Null an:

  private void ddlTasks_SelectedIndexChanged(object sender, System.EventArgs e)
  {
     if (ddlTasks.SelectedValue != 0) {
        ChangeStatus(ddlTasks.SelectedValue);
        ddlTasks.SelectedValue = "0"; //// **This fixed my issue**
     }

     dvItemsGrid.DataSource = CreateDatasource();
     dvItemsGrid.DataBind();
     dvItemsGrid.UseAccessibleHeader = true;
     dvItemsGrid.HeaderRow.TableSection = TableRowSection.TableHeader;

  }

Das war meine Schuld:

     $('#<%= DropDownList.ClientID%>').val('0').trigger("chosen:updated").chosen();
1
hsobhy

Ich hatte das gleiche Problem, aber ich erzeugte die Tabelle Dynamisch . In meinem Fall fehlten in meiner Tabelle die Tags <thead> und <tbody>.

hier ist mein Code-Snippet, wenn es jemandem geholfen hat

   //table string
   var strDiv = '<table id="tbl" class="striped center responsive-table">';

   //add headers
   var strTable = ' <thead><tr id="tableHeader"><th>Customer Name</th><th>Customer Designation</th><th>Customer Email</th><th>Customer Organization</th><th>Customer Department</th><th>Customer ContactNo</th><th>Customer Mobile</th><th>Cluster Name</th><th>Product Name</th><th> Installed Version</th><th>Requirements</th><th>Challenges</th><th>Future Expansion</th><th>Comments</th></tr> </thead> <tbody>';


  //add data
  $.each(data, function (key, GetCustomerFeedbackBE) {
                            strTable = strTable + '<tr><td>' + GetCustomerFeedbackBE.StrCustName + '</td><td>' + GetCustomerFeedbackBE.StrCustDesignation + '</td><td>' + GetCustomerFeedbackBE.StrCustEmail + '</td><td>' + GetCustomerFeedbackBE.StrCustOrganization + '</td><td>' + GetCustomerFeedbackBE.StrCustDepartment + '</td><td>' + GetCustomerFeedbackBE.StrCustContactNo + '</td><td>' + GetCustomerFeedbackBE.StrCustMobile + '</td><td>' + GetCustomerFeedbackBE.StrClusterName + '</td><td>' + GetCustomerFeedbackBE.StrProductName + '</td><td>' + GetCustomerFeedbackBE.StrInstalledVersion + '</td><td>' + GetCustomerFeedbackBE.StrRequirements + '</td><td>' + GetCustomerFeedbackBE.StrChallenges + '</td><td>' + GetCustomerFeedbackBE.StrFutureExpansion + '</td><td>' + GetCustomerFeedbackBE.StrComments + '</td></tr>';
                        });

//add end of tbody
 strTable = strTable + '</tbody></table>';

//insert table into a div                 
   $('#divCFB_D').html(strDiv);
   $('#tbl').html(strTable);


    //finally add export buttons 
   $('#tbl').DataTable({
                            dom: 'Bfrtip',
                            buttons: [
                                'copy', 'csv', 'Excel', 'pdf', 'print'
                            ]
                        });
1
Hitesh Sahu

Ich hatte eine dynamisch generierte, aber schlecht geformte Tabelle mit einem Tippfehler. Ich habe versehentlich einen <td>-Tag in einen anderen <td> kopiert. Meine Spaltenanzahl stimmte überein. Ich hatte <thead>- und <tbody>-Tags. Alles stimmte überein, abgesehen von diesem kleinen Fehler, den ich eine Weile nicht bemerkte, da meine Kolumne viele Link- und Image-Tags enthielt.

1
Peter Szalay

Dies kann neben inkonsistenten Zahlen auch dazu führen, dass ein fehlendes Element im Teil der datierbaren Skriptspalten enthalten ist. Das Problem wurde behoben, durch das die Suchleiste meiner Datentabellen korrigiert wurde.

Ich spreche von diesem Teil.

"columns": [
  null,
  .
  .
  .
  null
           ],

Ich kämpfte mit diesem Fehler, bis ich darauf hingewiesen wurde, dass dieser Teil eine "Null" weniger hatte als meine Gesamtanzahl.

1
Ege Bayrak

<thead> und <tbody> mit der gleichen Anzahl von <th> und <td> zu haben, löste mein Problem.

0

Dieser hat mich verrückt gemacht - wie man eine DataTable erfolgreich in einer .NET MVC-Ansicht rendert. Das hat funktioniert:

 **@model List<Student>
 @{
    ViewData["Title"] = "Index";
}
 <h2>NEW VIEW Index</h2>
 <table id="example" class="display" style="width:100%">
   <thead>
   <tr>
   <th>ID</th>
    <th>Firstname</th>
    <th>Lastname</th> 
  </tr>
  </thead>
  <tbody>
@foreach (var element in Model)
{
    <tr>
    <td>@Html.DisplayFor(m => element.ID)</td>
    <td>@Html.DisplayFor(m => element.FirstName)</td>
    <td>@Html.DisplayFor(m => element.LastName)</td>
    </tr>

}
</tbody>
</table>**

Skript in JS-Datei:

**$(document).ready(function () {
    $('#example').DataTable();
});**
0
smac2020

Ich kann durch aoColumns-Feld entstehen. Wie schon gesagt

aoColumns: Wenn angegeben, muss die Länge dieses Arrays gleich sein auf die Anzahl der Spalten in der ursprünglichen HTML-Tabelle. Verwenden Sie 'null' wo Sie möchten nur die Standardwerte verwenden und automatisch erkannt werden Optionen.

Dann müssen Sie Felder wie in Tabellenspalten hinzufügen 

...
aoColumnDefs: [
    null,
    null,
    null,
    { "bSortable": false },
    null,
],
...
0

Tipps 1:

In diesem Link finden Sie einige Ideen:

https://datatables.net/forums/discussion/20273/uncaught-typeerror-cannot-read-property-mdata-of-undefined

Tipps 2:

Überprüfen Sie folgendes ist richtig:

  • Bitte überprüfen Sie die Jquery Vesion
  • Bitte überprüfen Sie die Version Ihrer CDN oder Ihrer lokalen Datentabelle .min & css-Dateien.
  • ihre Tabelle hat <thead></thead> & <tbody></tbody>-Tags
  • Ihre Tabelle Header Columns Länge ist identisch mit Body Columns Length
  • Ihr Verwendet einige Cloumns in style='display:none' als dasselbe Objekt, gilt sowohl für Header als auch für Body.
  • ihre Tabellenspalten sind nicht leer, verwenden Sie etwas wie [Null, -, NA, Nil]
  • Ihre Tabelle ist ohne <td>, <tr> Problem 
0
venkatSkpi

Ich hatte den gleichen Fehler, als ich versuchte, colspan zum letzten zu addieren

<table>
  <thead>
    <tr>    
      <th>&nbsp;</th> <!-- column 1 -->
      <th colspan="2">&nbsp;</th> <!-- column 2&3 -->
    </tr>
  </thead>

  <tbody>
    <tr>
      <tr>&nbsp;</tr>
      <tr>&nbsp;</tr>
      <tr>&nbsp;</tr>
    </tr>
  </tbody>
</table>

und löste es durch das Hinzufügen einer versteckten Spalte am Ende von tr

<thead>
  <tr>    
    <th>&nbsp;</th> <!-- column 1 -->
    <th colspan="2">&nbsp;</th> <!-- column 2&3 -->

    <!-- hidden column 4 for proper DataTable applying -->
    <th style="display: none"></th> 
  </tr>
</thead>

<tbody>
  <tr>
    <tr>&nbsp;</tr>
    <tr>&nbsp;</tr>
    <tr>&nbsp;</tr>

    <!-- hidden column 4 for proper DataTable applying -->
    <tr style="display: none"></tr>
  </tr>
</tbody>

Eine Erklärung dafür ist, dass DataTable aus irgendeinem Grund nicht auf eine Tabelle mit Colspan im letzten Th angewendet werden kann, sondern nur, wenn Colspan in einem mittleren Th verwendet wird.

Diese Lösung ist ein bisschen verrückt, aber einfacher und kürzer als jede andere Lösung, die ich gefunden habe.

Ich hoffe das hilft jemandem.

0
renkse

Sie müssen Ihre Zeilen in <thead> für die Spaltenüberschriften und <tbody> für die Zeilen umschließen. Stellen Sie auch sicher, dass Sie eine passende Nr. von Spaltenüberschriften <th> wie für td

0
William