DataTables Cannot read property style of undefined

Question

I am getting this error with the following   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   The line above referring to      anonymous function    VM3156 180 is                   TASKLISTGRID       TASK LIST GRID   DataTable                       data   response                      columns   columns AdoptionTaskInfo columns                      paging  true                       So I am guessing this is where it is failing   The HTML ID element exist      lt 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  gt     lt thead gt       lt tr role  row  gt         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Solution lt  th gt         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Status lt  th gt         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Category lt  th gt         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Type lt  th gt         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Due Date lt  th gt         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Create Date lt  th gt         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Owner lt  th gt         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Comments lt  th gt         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Mnemonic lt  th gt         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Domain lt  th gt         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Approve lt  th gt         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Dismiss lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt  lt  tbody gt   lt  table gt    Also  the columns AdoptionTaskInfo columns  amp  response object arrays exist  Not sure how to debug what s wrong   Any suggestions will be helpful

User · Answer

In my case  I was updating the server-sided datatable twice and it gives me this error  Hope it helps someone

User · Answer

POSSIBLE CAUSES   Number of th elements in the table header or footer differs from number of columns in the table body or defined using columns option  Attribute colspan is used for th element in the table header  Incorrect column index specified in columnDefs targets option    SOLUTIONS   Make sure that number of th elements in the table header or footer matches number of columns defined in the columns option  If you use colspan attribute in the table header  make sure you have at least two header rows and one unique th element for each column  See Complex header for more information  If you use columnDefs targets option  make sure that zero-based column index refers to existing columns    LINKS  See jQuery DataTables  Common JavaScript console errors - TypeError  Cannot read property    style    of undefined for more information

User · Answer

I had this issue when i set colspan in table header  So my table was            lt thead gt               lt tr gt                   lt th colspan  2  gt Expenses lt  th gt                    lt th colspan  2  gt Income lt  th gt                    lt th gt Profit Loss lt  th gt               lt  tr gt           lt  thead gt    Then once i change it to            lt thead gt               lt tr gt                   lt th gt Expenses lt  th gt                   lt th gt  lt  th gt                   lt th gt Income lt  th gt                   lt th gt  lt  th gt                   lt th gt Profit Loss lt  th gt               lt  tr gt           lt  thead gt    Everything worked just fine

User · Answer

most of the time it happens when the table header count and data cel count is not matched

User · Answer

I resolved this error  by replacing the src attribute with https   code jquery com jquery-3 5 1 min js  the problem is caused by the slim version of JQuery

User · Answer

The solution is pretty simple     x000D   x000D     lt 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  gt  x000D     lt thead gt  x000D       lt tr role  row  gt  x000D         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Solution lt  th gt  x000D         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Status lt  th gt  x000D         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Category lt  th gt  x000D         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Type lt  th gt  x000D         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Due Date lt  th gt  x000D         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Create Date lt  th gt  x000D         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Owner lt  th gt  x000D         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Comments lt  th gt  x000D         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Mnemonic lt  th gt  x000D         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Domain lt  th gt  x000D         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Approve lt  th gt  x000D         lt th class  sorting  tabindex  0  aria-controls  TASK LIST GRID  rowspan  1  colspan  1  gt Dismiss lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D     x000D   x000D                  TASKLISTGRID       TASK LIST GRID   DataTable   x000D                      data   response  x000D                      columns   columns AdoptionTaskInfo columns  x000D                      paging  true x000D                      x000D                   x000D                    Note  columns   columns AdoptionTaskInfo columns has at least a column not definded in the  lt thead gt  x000D   x000D   x000D    Note  columns   columns AdoptionTaskInfo columns has at least a column not defined in the table head

User · Answer

Make sure that in your input data  response i  and response i  j   are not undefined null    If so  replace them with

User · Answer

It can also happen when drawing a new  other  table  I solved this by first removing the previous table       prod tabel ph   remove

User · Answer

Funnily i was getting the following error for having one th- th pair too many and still google directed me here  I ll leave it written down so people can find it   jquery dataTables min js 27 Uncaught TypeError  Cannot read property  className  of undefined at ua  jquery dataTables min js 27  at HTMLTableElement  lt anonymous gt   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  lt anonymous gt   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

User · Answer

You said any suggestions wold be helpful  so currently I resolved my DataTables  cannot read property  style  of undefined  problem but my problem was basically using wrong indexes at data table initiation phase s columnDefs section  I got 9 columns and the indexes are 0  1  2       8 but I was using indexes for 9 and 10 so after fixing the wrong index issue the fault has disappeared  I hope this helps   In short  you got to watch your columns amount and indexes if consistent everywhere   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                     Fixed 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

User · Answer

The problem is that the number of  lt th gt  tags need to match the number of columns in the configuration  the array with the key  columns    If there are fewer  lt th gt  tags than columns specified  you get this slightly cryptical error message    the correct answer is already present as a comment but I m repeating it as an answer so it s easier to find - I didn t see the comments

[javascript] DataTables: Cannot read property style of undefined

Examples related to javascript

Examples related to jquery

Examples related to node.js

Examples related to datatables