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

Ich habe ein Problem mit Datatables. Ich bin auch über diesen Link gegangen , der keine Ergebnisse erbracht hat. Ich habe alle Voraussetzungen, unter denen ich Daten analysiere, direkt in das DOM aufgenommen. Bitte helfen Sie mir, 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]
    }],
  });
});

Zu Ihrer Information dataTables erfordert eine wohlgeformte Tabelle. Es muss <thead>und <tbody>Tags enthalten , sonst wird dieser Fehler ausgelöst. Stellen Sie außerdem sicher, dass alle Ihre Zeilen einschließlich der Kopfzeile dieselbe Anzahl von Spalten haben.

Das Folgende wird einen Fehler auslösen (nein <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>

Weitere Informationen finden Sie hier

Eine häufige Ursache dafür Cannot read property 'fnSetData' of undefinedist 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 einem <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 Kopf mit einem Colspan, jedoch ohne zweite Reihe verwendet wird.

Für eine Tabelle mit 7 Spalten funktioniert Folgendes nicht und in der Javascript-Konsole wird "Eigenschaft 'mData' von undefined kann nicht gelesen werden" angezeigt:

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

Während dies 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>

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

Ich kann nicht sagen, ob dies das gleiche Problem ist, das Sie haben, da ich Ihr HTML nicht sehen kann. Wenn es nicht dasselbe Problem ist, können Sie den Chrome-Debugger verwenden, um herauszufinden, in welcher Spalte ein Fehler auftritt, indem Sie auf den Fehler in der Konsole klicken (der Sie zu dem Code führt, auf dem er fehlschlägt) und dann eine Bedingung hinzufügen Haltepunkt (at col==undefined). Wenn es stoppt, können Sie die Variable überprüfen, um festzustellen, iin welcher Spalte sie sich gerade befindet. Auf diese Weise können Sie herausfinden, was sich an dieser Spalte von den anderen unterscheidet. Hoffentlich hilft das!

Mit <thead>und <tbody>mit der gleichen Anzahl <th>und <td>gelöst mein Problem.

Dies kann auch auftreten, wenn Sie Tabellenargumente für Dinge haben 'aoColumns':[..], 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 die Integration von Datentabellen schnell zu starten.

Beispiel:

Das wird nicht 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': [[ 1, 'desc' ]],
            'aoColumns': [
                null,
                null,
                null,
                null,
                null,
                null,
                {
                    'bSortable': false
                }
            ]
        });
</script>

Aber das wird 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>

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

Die Anzahl der Spalten muss mit den Überschriften ü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>

Sie müssen Ihre colspanund die Anzahl entfernen th und tdmüssen übereinstimmen.

Tipps 1:

Unter diesem Link erhalten Sie einige Ideen:

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

Tipps 2:

Überprüfen Sie, ob Folgendes korrekt ist:

• Bitte überprüfen Sie die Jquery Vesion
• Bitte überprüfen Sie die Version Ihres CDN oder Ihrer lokalen datierbaren .min & css-Dateien
• Ihre Tabelle hat <thead></thead>& <tbody></tbody>Tags
• Ihr Tisch Kopf Spalten Länge gleiche wie Körper Spalten Länge
• Wenn Sie einige Spalten in style='display:none'derselben Eigenschaft verwenden, gilt dies sowohl für den Header als auch für den Body.
• Ihre Tabellenspalten sind nicht leer. Verwenden Sie so etwas wie [Null, -, NA, Nil].
• Ihr Tisch ist gut ohne <td>, <tr>Probleme

In meinem Fall trat dieser Fehler auf, wenn ich eine Tabelle ohne Header verwende

              <thead>
                   <tr>
                       <th>example</th>
                  </tr>
              </thead>

Ich hatte den gleichen Fehler, als ich versuchte, Colspan zum letzten Mal hinzuzufügen

<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 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 Tabellen mit Colspan im letzten Th angewendet werden kann, sondern angewendet werden kann, wenn Colspan in einem mittleren Th verwendet wird.

Diese Lösung ist etwas hackig, aber einfacher und kürzer als jede andere Lösung, die ich gefunden habe.

Ich hoffe das hilft jemandem.

Etwas anderes Problem für mich als die oben gegebenen Antworten. Für mich war das HTML-Markup in Ordnung, aber eine meiner Spalten im Javascript fehlte und stimmte nicht mit dem HTML überein.

dh

<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>

Ich hatte einen dynamisch generierten, aber schlecht geformten Tisch mit einem Tippfehler. Ich habe versehentlich ein <td>Tag in ein anderes kopiert <td>. Meine Spaltenanzahl stimmte überein. Ich hatte <thead>und <tbody>Tags. Alles stimmte überein, bis auf diesen kleinen Fehler, den ich eine Weile nicht bemerkt hatte, weil meine Kolumne viele Link- und Bild-Tags enthielt.

Ich hatte das gleiche Problem festgestellt, aber ich habe die Tabelle dynamisch generiert . In meinem Fall fehlte meine Tabelle <thead>und <tbody>Tags.

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'
                            ]
                        });

Zusätzlich zu inkonsistenten und Zahlen kann ein fehlendes Element im Teil der Spalten mit datierbaren Skripts auch dies verursachen. Durch die Korrektur wurde die Suchleiste für Datentabellen behoben.

Ich spreche über diesen Teil;

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

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

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();
});**

In meinem Fall und mit ASP.NET GridView, UpdatePanel und DropDownList (mit dem ausgewählten Plugin, bei dem ich den Wert mithilfe einer Javascript-Zeile auf Null zurückgesetzt habe) habe ich diesen Fehler erhalten und tagelang alles ohne Hoffnung versucht. Das Problem war, dass der Code meines Dropdowns im Code dahinter wie folgt war. Wenn ich einen Wert zweimal auswähle, um seine Aktion auf ausgewählte Rasterzeilen anzuwenden, wird dieser Fehler angezeigt. Ich dachte tagelang, es sei ein Javascript-Problem (wieder in meinem Fall) und schließlich gab das Update beim Aktualisierungsprozess Null für den Drowpdown-Wert:

  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();

Sie müssen Ihre Zeilen <thead>für die Spaltenüberschriften und <tbody>für die Zeilen einschließen. Stellen Sie außerdem sicher, dass Sie die passende Nr. von Spaltenüberschriften <th>wie Sie für dietd

Ich kann durch aoColumns Feld entstehen. Wie HIER angegeben

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

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

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

In meinem Fall ist die Ursache für diesen Fehler, dass ich 2 Tabellen habe, die denselben ID-Namen mit unterschiedlicher Tabellenstruktur haben, da ich es gewohnt bin, Tabellencode zu kopieren und einzufügen. Bitte stellen Sie sicher, dass Sie für jede Tabelle eine andere ID haben.

<table id="tabel_data">
    <thead>
        <tr>
            <th>heading 1</th>
            <th>heading 2</th>
            <th>heading 3</th>
            <th>heading 4</th>
            <th>heading 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data-1</td>
            <td>data-2</td>
            <td>data-3</td>
            <td>data-4</td>
            <td>data-5</td>
        </tr>
    </tbody>
</table>

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

Ich habe eine "Lösung" gefunden.

Dieser Code funktioniert nicht:

<table>
<thead>
    <tr>
        <th colspan="3">Test</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody>

Aber das ist ok:

<table>
<thead>
    <tr>
        <th colspan="2">Test</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</tbody>

Ich denke, das Problem ist, dass der letzte TH kein Attribut colspan haben kann.