Tables: Kann nicht Eigentum Stil undefinierter

Ich erhalte diesen Fehler mit dem folgenden Wortlaut:Tables: Kann nicht Eigentum Stil undefinierter

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 Zeile oben unter Bezugnahme auf (anonyme Funktion) @ VM3156: 180:

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

So Ich schätze, hier versagt es.

Das HTML-ID-Element vorhanden sein:

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

Auch die columns.AdoptionTaskInfo.columns & Response-Objekt-Arrays bestehen. Nicht sicher, wie zu debuggen, was falsch ist .. wird Irgendwelche Vorschläge hilfreich sein ..

Quelle

2016-09-07 Rookie

Suchen Sie in Ihrem Code nach '.style'. Sie versuchen, auf diese Eigenschaft einer undefinierten Variablen zuzugreifen. Sie können von dort debuggen. – Jecoms

+18

Überprüfen Sie, ob die Anzahl der Spalten, die Sie abzurufen versuchen, der Anzahl der von Ihnen erstellten entspricht. – matrixguy

Nummer der Spaltenspalte mit der Anzahl der in Javascripts definierten Spalten, die dieses Problem verursachen. – Dhanuka777

Vergewissern Sie sich, dass in Ihrem Eingangsdaten, response[i] und response[i][j], sind nicht undefined/null.

Wenn ja, ersetzen Sie sie durch "".

Quelle

2016-11-21 20:37:10

Sie sagten, dass irgendwelche Vorschläge wold nützlich sein würden, also löste ich zurzeit meine DataTables "Eigenschaft Eigenschaft des unbestimmten" Stils "nicht lesen" Problem, aber mein Problem benutzte im Grunde falsche Indizes am Abschnitt columnDefs der Datentabelle Initiierungsphase. Ich habe 9 Spalten und die Indizes sind 0, 1, 2, .., 8, aber ich habe Indizes für 9 und 10, also nach der Korrektur der falschen Index Problem der Fehler ist verschwunden. Ich hoffe das hilft.

Kurz gesagt, Sie müssen Ihre Spalten Menge und Indizes beobachten, wenn überall konsistent.

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

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

Quelle

2017-02-08 10:53:18 webmaster

Das Problem ist, dass die Zahl der <th> Tags müssen die Anzahl der Spalten in der Konfiguration entsprechen (das Array mit dem Schlüssel "columns"). Wenn weniger <th> Tags als Spalten angegeben sind, erhalten Sie diese leicht kryptische Fehlermeldung.

(die richtige Antwort ist bereits als Kommentar, aber ich bin es als Antwort zu wiederholen, so dass es einfacher ist, zu finden - ich habe die Kommentare nicht)

Quelle

2017-02-10 11:28:31 ehrencrona

ich dieses Problem hatte, als ich colspan gesetzt in Tabellenkopf Also mein Tisch war:

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

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

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

Dann, wenn ich es ändern:

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

Alles funktionierte gut.

Quelle

2017-06-08 13:30:13 JustLearning

Es kann auch passieren, wenn Sie eine neue (andere) Tabelle zeichnen. Ich löste dies, indem zuerst die vorherige Tabelle zu entfernen:

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

Quelle

2017-06-09 15:07:03 Guest

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>

   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>

Hinweis: Säulen: columns.AdoptionTaskInfo.columns hat mindestens eine Spalte in der Tabelle nicht definierten Kopf

Quelle

2017-11-05 01:48:42

The already answer is given but I can provide something that will not cause this 
Error. 

Example :-when you are defining a table into div 

    <table id="addSomeTable" class="table table-striped table-bordered" style="width:100%;" > 
         <thead> 
         <tr> 
          <th style="text-align: center;">Id</th> 
          <th style="text-align: center;">Name</th> 
          <th style="text-align: center;">Model</th> 
          <th style="text-align: center;padding-left: 30px;">Version</th> 
          <th style="text-align: center;padding-left: 30px;">CreatedBy</th> 
          <th style="text-align: center;">CreatedOn</th> 
          <th style="text-align: center;padding-left: 30px;">Status</th> 
          <th id="select" style="text-align: center;padding-left: 30px;">Select</th> 

         </tr> 
         </thead> 
         <tbody> 
          <tr> 
          </tr> 
         </tbody> 
        </table> 

    So this is not good approach because when you want to change your table 
    in future,means want to add new column then you have to add both side. 
    Suppose that you want one more column model in column then 
    you have to add in html 
    <th style="text-align: center;">Model</th> 
    and definitely you have to add in javascript as well :-if you 
    do not do you will get error jquery.dataTables.js:5553 Uncaught 
    TypeError: Cannot read property 'style' of undefined 
    at _fnCalculateColumnWidths (jquery.dataTables.js:5553) 
    So good approach is instead of defining <th> and <tr> 
    you can just provide 

    <table id="addAttributeTable" class="table table-striped table-bordered" 
    style="width:100%;" > 
    </table> 



    { "title":"Model",data:"model"}, 

Example this :- 
"columns" : [                      
{"title":"Id","data" : "id"}, 

{"title":"Name","data" : "name"},                  
],

Quelle

2018-03-08 05:42:21 Sheel

Tables: Kann nicht Eigentum Stil undefinierter

Antwort

Verwandte Themen