DataTables: Der Eigenschaftsstil von undefined kann nicht gelesen werden

117

Ich erhalte 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
                });

Ich vermute also, dass dies hier fehlschlägt.

Das HTML-ID-Element ist vorhanden:

  <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 Arrays columns.AdoptionTaskInfo.columns & response object vorhanden. Ich bin mir nicht sicher, wie ich das Fehler beheben soll. Vorschläge sind hilfreich.

javascript jquery node.js datatables Anfänger
quelle
2
Suchen Sie .stylein Ihrem Code nach. Sie versuchen, auf diese Eigenschaft einer undefinierten Variablen zuzugreifen. Sie können von dort aus debuggen.
Jecoms
80
Überprüfen Sie, ob die Anzahl der Spalten, die Sie abrufen möchten, mit der Anzahl der von Ihnen erstellten <th> übereinstimmt.
Matrixguy
12
Anzahl der nicht übereinstimmenden Spalten mit der Anzahl der in Javascripts definierten Spalten, die dieses Problem verursachen.
Dhanuka777

Antworten:

283

Das Problem ist, dass die Anzahl der <th> -Tags mit der Anzahl der Spalten in der Konfiguration übereinstimmen muss (das Array mit dem Schlüssel "Spalten"). Wenn weniger <th> -Tags als die angegebenen Spalten vorhanden sind, wird diese leicht kryptische Fehlermeldung angezeigt.

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

ehrencrona
quelle
2
Ich möchte einen weiteren Punkt hinzufügen. Vielleicht finden die Leute ihn in einigen Fällen hilfreich. Wenn Sie dataSrc nicht definieren, verwenden Sie in Ihrem JSON "Daten". Wenn Sie einen anderen Namen verwenden, wird dieser Fehler angezeigt.
Ahmed Sunny
Wenn Sie Spalten haben, die nicht sichtbar sind, aber beispielsweise für die Suche oder den Editor enthalten sind, müssen sie sich am Ende Ihrer Spalten befinden: [] Liste.
Tim Dearborn
24

MÖGLICHE URSACHEN

  • Die Anzahl der thElemente in der Kopf- oder Fußzeile der Tabelle unterscheidet sich von der Anzahl der Spalten im Tabellenkörper oder wird mit der columnsOption definiert .
  • Das Attribut colspan wird für das thElement in der Tabellenüberschrift verwendet.
  • Falscher Spaltenindex in columnDefs.targetsOption angegeben.

LÖSUNGEN

  • Stellen Sie sicher, dass die Anzahl der thElemente in der Kopf- oder Fußzeile der Tabelle mit der Anzahl der in der columnsOption definierten Spalten übereinstimmt .
  • Wenn Sie ein colspanAttribut im Tabellenkopf verwenden, stellen Sie sicher, dass Sie mindestens zwei Kopfzeilen und ein eindeutiges thElement für jede Spalte haben. Weitere Informationen finden Sie unter Komplexer Header .
  • Wenn Sie die columnDefs.targetsOption verwenden, stellen Sie sicher, dass der auf Null basierende Spaltenindex auf vorhandene Spalten verweist.

LINKS

Weitere Informationen finden Sie unter jQuery DataTables: Häufige JavaScript-Konsolenfehler - TypeError: Die Eigenschaft 'style' von undefined kann nicht gelesen werden .

Gyrocode.com
quelle
13

Sie sagten, dass alle Vorschläge hilfreich sein würden, daher habe ich derzeit mein DataTables-Problem "Eigenschaftsstil kann nicht definiert werden" gelöst, aber mein Problem bestand im Grunde darin, im columnDefsAbschnitt zur Initiierungsphase der Datentabelle falsche Indizes zu verwenden . Ich habe 9 Spalten und die Indizes sind 0, 1, 2, .., 8, aber ich habe Indizes für 9 und 10 verwendet, sodass der Fehler nach Behebung des falschen Indexproblems verschwunden ist. Ich hoffe das hilft.

Kurz gesagt, Sie müssen die Anzahl Ihrer Spalten und Indizes beobachten, 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
        ]
    });
Bahadir Tasdemir
quelle
Das hat mich gerettet, danke. Ich benutze "aTargets": [7], daher ist es ein Fehler, da es keine Spalte mit Index 7 gibt. Legacy.datatables.net/usage/columns
fudu
1
Großartig Ich bin froh, dass meine Antwort Ihr Problem behoben hat, + Stimmen bitte
Bahadir Tasdemir
10

Ich hatte dieses Problem, als ich den colspanTabellenkopf einstellte . Mein Tisch war also:

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

JustLearning
quelle
4

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

Wenn ja, ersetzen Sie sie durch "".

David I. Samudio
quelle
3

Dies kann auch beim Zeichnen einer neuen (anderen) Tabelle passieren. Ich habe dies gelöst, indem ich zuerst die vorherige Tabelle entfernt habe:

$("#prod_tabel_ph").remove();

Gast
quelle
2

Die Lösung ist ziemlich einfach. 

  <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>
Erweitern Sie das Snippet

                TASKLISTGRID = $("#TASK_LIST_GRID").DataTable({
                    data : response,
                    columns : columns.AdoptionTaskInfo.columns,
                    paging: true
                });
                
                //Note: columns : columns.AdoptionTaskInfo.columns has at least a column not definded in the <thead>
Erweitern Sie das Snippet

Hinweis : column: columns.AdoptionTaskInfo.columns enthält mindestens eine Spalte, die im Tabellenkopf nicht definiert ist

Stanley Okpala Nwosa
quelle
1

Lustigerweise bekam ich den folgenden Fehler, weil ein drittes Paar zu viel war, und Google hat mich trotzdem hierher geleitet. Ich werde es aufschreiben lassen, damit die Leute es finden können.

jquery.dataTables.min.js:27 Uncaught TypeError: Cannot read property 'className' of undefined
at ua (jquery.dataTables.min.js:27)
at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:127)
at Function.each (jquery.min.js:2)
at n.fn.init.each (jquery.min.js:2)
at n.fn.init.j (jquery.dataTables.min.js:116)
at HTMLDocument.<anonymous> (history:619)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.K (jquery.min.js:2)
Tomás Gaete
quelle
0

In meinem Fall habe ich die serverseitige Datentabelle zweimal aktualisiert und es wird mir dieser Fehler angezeigt. Hoffe es hilft jemandem.

Taian
quelle