DataTables: Eigenschaftsstil von undefiniert kann nicht gelesen werden

Lesezeit: 6 Minuten

Benutzer-Avatar
Anfänger

Ich bekomme diesen Fehler mit folgendem:

jquery.dataTables.js:4089 Uncaught TypeError: Cannot read property 'style' of undefined(…)
_fnCalculateColumnWidths @ jquery.dataTables.js:4089
_fnInitialise @ jquery.dataTables.js:3216
(anonymous function) @ jquery.dataTables.js:6457
each @ jquery-2.0.2.min.js:4
each @ jquery-2.0.2.min.js:4
DataTable @ jquery.dataTables.js:5993
$.fn.DataTable @ jquery.dataTables.js:14595
(anonymous function) @ VM3329:1
(anonymous function) @ VM3156:180
l @ jquery-2.0.2.min.js:4
fireWith @ jquery-2.0.2.min.js:4
k @ jquery-2.0.2.min.js:6
(anonymous function) @ jquery-2.0.2.min.js:6

Die obige Zeile, die sich auf (anonyme Funktion) @ VM3156:180 bezieht, lautet:

                TASKLISTGRID = $("#TASK_LIST_GRID").DataTable({
                    data : response,
                    columns : columns.AdoptionTaskInfo.columns,
                    paging: true
                });

Daher vermute ich, dass es hier fehlschlägt.

Das HTML-ID-Element existiert:

  <table id="TASK_LIST_GRID" class="table table-striped table-bordered table-hover dataTable no-footer" width="100%" role="grid" aria-describedby="TASK_LIST_GRID_info">
  <thead>
    <tr role="row">
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Solution</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Status</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Category</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Type</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Due Date</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Create Date</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Owner</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Comments</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Mnemonic</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Domain</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Approve</th>
      <th class="sorting" tabindex="0" aria-controls="TASK_LIST_GRID" rowspan="1" colspan="1">Dismiss</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Außerdem sind die Objektarrays “columns.AdoptionTaskInfo.columns” und “response” vorhanden. Nicht sicher, wie man debuggt, was falsch ist. Alle Vorschläge werden hilfreich sein.

  • Suchen .style in deinem Code. Sie versuchen, auf diese Eigenschaft einer undefinierten Variablen zuzugreifen. Sie können von dort aus debuggen.

    – Jecoms

    7. September 2016 um 18:18 Uhr

  • Überprüfen Sie, ob die Anzahl der Spalten, die Sie abrufen möchten, mit der Anzahl der von Ihnen erstellten

    übereinstimmt.

    – Matrixtyp

    7. September 2016 um 18:18 Uhr


  • Die Anzahl der Spalten stimmt nicht mit der Anzahl der Spalten überein, die in Javascripts definiert sind, was dieses Problem verursacht.

    – Dhanuka777

    6. November 2016 um 23:33 Uhr

Das Problem ist, dass die Anzahl der

-Tags mit der Anzahl der Spalten in der Konfiguration übereinstimmen muss (das Array mit dem Schlüssel “columns”). Wenn weniger

-Tags als Spalten angegeben sind, erhalten Sie diese etwas kryptische Fehlermeldung.

(Die richtige Antwort ist bereits als Kommentar vorhanden, aber ich wiederhole sie als Antwort, damit sie leichter zu finden ist – ich habe die Kommentare nicht gesehen.)

  • Ich möchte einen weiteren Punkt hinzufügen, vielleicht finden es die Leute in einigen Fällen hilfreich, wenn Sie dataSrc nicht definieren, dann verwenden Sie in Ihrem JSON “data”, wenn Sie einen anderen Namen verwenden, erhalten Sie diesen Fehler.

    – Ahmed Sunny

    14. März 2019 um 14:17 Uhr

  • Wenn Sie Spalten haben, die nicht sichtbar sind, aber für Dinge wie die Suche oder den Editor enthalten sind, müssen diese am Ende Ihrer Spalten stehen:[ ] aufführen.

    – Tim Dearborn

    4. Dezember 2019 um 19:21 Uhr

  • Vielen Dank, ich habe mich über Probleme mit Javascripts gewundert.

    – Jimil Choksi

    12. August 2020 um 14:38 Uhr

  • Danke, ich habe auch festgestellt, dass ich meine Daten falsch bekommen habe und weniger Dateien als Spalten hatte, also habe ich mehr als einen Fehler herausgefunden, den ich bekommen habe

    – Ricardo Rivera Nieves

    4. Dezember 2020 um 1:48 Uhr

  • Sie müssen eine Auszeichnung erhalten. Tonnenweise Zeit gespart. Danke @ehrencrona

    – Avi

    16. April 2021 um 18:40 Uhr

MÖGLICHE URSACHEN

  • Anzahl von th Elemente in der Kopf- oder Fußzeile der Tabelle weichen von der Anzahl der Spalten im Hauptteil der Tabelle ab oder wurden mit definiert columns Möglichkeit.
  • Das Attribut colspan wird verwendet th Element im Tabellenkopf.
  • Falscher Spaltenindex angegeben in columnDefs.targets Möglichkeit.

LÖSUNGEN

  • Stellen Sie sicher, dass die Anzahl der th Elemente in der Kopf- oder Fußzeile der Tabelle stimmen mit der Anzahl der Spalten überein, die in definiert sind columns Möglichkeit.
  • Wenn du benutzt colspan Attribut in der Tabellenüberschrift, stellen Sie sicher, dass Sie mindestens zwei Kopfzeilen und eine eindeutige haben th Element für jede Spalte. Sehen Komplexer Header für mehr Informationen.
  • Wenn du benutzt columnDefs.targets stellen Sie sicher, dass der nullbasierte Spaltenindex auf vorhandene Spalten verweist.

LINKS

Sehen jQuery DataTables: Häufige JavaScript-Konsolenfehler – TypeError: Eigenschaft „Stil“ von undefiniert kann nicht gelesen werden für mehr Informationen.

  • Vielen Dank, die letzte Lösung des Spaltenindex hat mir geholfen

    – D. Ahmed

    1. Dezember 2021 um 9:25 Uhr

Sie sagten, alle Vorschläge wären hilfreich, daher habe ich derzeit mein DataTables-Problem “Eigenschaft ‘Stil’ von undefiniert kann nicht gelesen werden” gelöst, aber mein Problem bestand im Grunde darin, falsche Indizes in der Initialisierungsphase der Datentabelle zu verwenden columnDefs Sektion. Ich habe 9 Spalten und die Indizes sind 0, 1, 2, .. , 8, aber ich habe Indizes für 9 und 10 verwendet, also ist der Fehler verschwunden, nachdem das falsche Indexproblem behoben wurde. Ich hoffe das hilft.

Kurz gesagt, Sie müssen auf die Anzahl Ihrer Spalten und Indizes achten, wenn sie überall konsistent sind.

Buggy-Code:

    jQuery('#table').DataTable({
        "ajax": {
            url: "something_url",
            type: 'POST'
        },
        "processing": true,
        "serverSide": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "columns": [
            { "data": "cl1" },
            { "data": "cl2" },
            { "data": "cl3" },
            { "data": "cl4" },
            { "data": "cl5" },
            { "data": "cl6" },
            { "data": "cl7" },
            { "data": "cl8" },
            { "data": "cl9" }
        ],
        columnDefs: [
            { orderable: false, targets: [ 7, 9, 10 ] } //This part was wrong
        ]
    });

Fester Code:

    jQuery('#table').DataTable({
        "ajax": {
            url: "something_url",
            type: 'POST'
        },
        "processing": true,
        "serverSide": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "columns": [
            { "data": "cl1" },
            { "data": "cl2" },
            { "data": "cl3" },
            { "data": "cl4" },
            { "data": "cl5" },
            { "data": "cl6" },
            { "data": "cl7" },
            { "data": "cl8" },
            { "data": "cl9" }
        ],
        columnDefs: [
            { orderable: false, targets: [ 5, 7, 8 ] } //This part is ok now
        ]
    });

  • Das hat mich gerettet, danke. Ich verwende “aTargets”: [7]also geht es auf Fehler, weil es keine Spalte mit Index 7 gibt. Legacy.datatables.net/usage/columns

    – fudu

    17. Mai 2019 um 7:59 Uhr

  • Großartig, ich freue mich, dass meine Antwort Ihr Problem behoben hat, + Stimmen bitte

    – Bahadir Tasdemir

    17. Mai 2019 um 8:02 Uhr

Meistens passiert es, wenn die Anzahl der Tabellenkopfzeilen und die Anzahl der Datenzellen nicht übereinstimmen

Ich hatte dieses Problem, als ich es eingestellt habe colspan im Tabellenkopf. Also mein Tisch war:

        <thead>
            <tr>
                <th colspan="2">Expenses</th>

                <th colspan="2">Income</th>

                <th>Profit/Loss</th>
            </tr>
        </thead>

Dann ändere ich es einmal in:

        <thead>
            <tr>
                <th>Expenses</th>
                <th></th>
                <th>Income</th>
                <th></th>
                <th>Profit/Loss</th>
            </tr>
        </thead>

Alles hat gut funktioniert.

Benutzer-Avatar
SagarKapasi099

Für mich die Datenspalten {data: columnName} hatte mehr Spalten als Tabellenköpfe <th>Column Name</th>

Stellen Sie sicher, dass in Ihren Eingabedaten response[i] und response[i][j]sind nicht undefined/null.

Wenn ja, ersetzen Sie sie durch “”.

1284110cookie-checkDataTables: Eigenschaftsstil von undefiniert kann nicht gelesen werden

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy