Javascript 数据表：无法读取未定义的属性样式

Question

提问by Rookie

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:

上面引用（匿名函数）@ VM3156:180 的行是：

                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:

HTML ID 元素存在：

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

Also, the columns.AdoptionTaskInfo.columns & response object arrays exist. Not sure how to debug what's wrong.. Any suggestions will be helpful..

此外，存在 columns.AdoptionTaskInfo.columns 和响应对象数组。不知道如何调试出了什么问题..任何建议都会有所帮助..

Answer 1

回答by ehrencrona

The problem is that the number of <th> tags need to match the number of columns in the configuration (the array with the key "columns"). If there are fewer <th> tags than columns specified, you get this slightly cryptical error message.

问题在于 <th> 标签的数量需要与配置中的列数（带有键“columns”的数组）相匹配。如果 <th> 标签比指定的列少，你会得到这个有点神秘的错误消息。

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

（正确答案已经作为评论出现，但我将其作为答案重复，以便更容易找到 - 我没有看到评论）

Answer 2

回答by Gyrocode.com

POSSIBLE CAUSES

可能的原因

Number of thelements in the table header or footer differs from number of columns in the table body or defined using columnsoption.
Attribute colspan is used for thelement in the table header.
Incorrect column index specified in columnDefs.targetsoption.

th表格页眉或页脚中的元素数与表格正文中的列数或使用columns选项定义的列数不同。
属性 colspan 用于th表头中的元素。
columnDefs.targets选项中指定的列索引不正确。

SOLUTIONS

解决方案

Make sure that number of thelements in the table header or footer matches number of columns defined in the columnsoption.
If you use colspanattribute in the table header, make sure you have at least two header rows and one unique thelement for each column. See Complex headerfor more information.
If you use columnDefs.targetsoption, make sure that zero-based column index refers to existing columns.

确保th表格页眉或页脚中的元素数与columns选项中定义的列数相匹配。
如果colspan在表格标题中使用属性，请确保至少有两个标题行和th每列一个唯一元素。有关详细信息，请参阅复杂标头。
如果使用columnDefs.targets选项，请确保从零开始的列索引引用现有列。

LINKS

链接

See jQuery DataTables: Common JavaScript console errors - TypeError: Cannot read property ‘style' of undefinedfor more information.

有关详细信息，请参阅jQuery DataTables：常见 JavaScript 控制台错误 - TypeError：无法读取未定义的属性“样式”。

Answer 3

回答by Bahadir Tasdemir

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

你说任何建议都会有帮助，所以目前我解决了我的数据表“无法读取未定义的属性‘样式’”问题，但我的问题基本上是在数据表启动阶段的columnDefs部分使用了错误的索引。我有 9 列，索引是 0, 1, 2, .. , 8 但我使用了 9 和 10 的索引，所以在修复错误的索引问题后，故障消失了。我希望这有帮助。

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

Answer 4

回答by JustLearning

I had this issue when i set colspanin table header. So my table was:

我colspan在表头中设置时遇到了这个问题。所以我的表是：

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

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

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

Then once i change it to:

然后一旦我将其更改为：

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

Everything worked just fine.

一切都很好。

Answer 5

回答by David I. Samudio

Make sure that in your input data, response[i]and response[i][j], are not undefined/null.

确保在您的输入数据中，response[i]andresponse[i][j]不是undefined/ null。

If so, replace them with "".

如果是这样，请将它们替换为“”。

Answer 6

回答by Guest

It can also happen when drawing a new (other) table. I solved this by first removing the previous table:

绘制新（其他）表格时也可能发生这种情况。我通过首先删除上一个表解决了这个问题：

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

Answer 7

回答by Stanley Okpala Nwosa

The solution is pretty simple.

解决方案非常简单。

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

Note: columns : columns.AdoptionTaskInfo.columns has at least a column not defined in the table head

注意：列：columns.AdoptionTaskInfo.columns 至少有一列未在表头中定义

Answer 8

回答by Tomás Gaete

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

Answer 9

回答by Taian

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

就我而言，我更新了服务器端数据表两次，它给了我这个错误。希望它可以帮助某人。

Javascript 数据表：无法读取未定义的属性样式

提问by Rookie

回答by ehrencrona

回答by Gyrocode.com

POSSIBLE CAUSES

可能的原因

SOLUTIONS

解决方案

LINKS

链接

回答by Bahadir Tasdemir

回答by JustLearning

回答by David I. Samudio

回答by Guest

回答by Stanley Okpala Nwosa

回答by Tomás Gaete

回答by Taian

相关推荐

最近更新

标签

Javascript 数据表：无法读取未定义的属性样式

提问by Rookie

回答by ehrencrona

回答by Gyrocode.com

POSSIBLE CAUSES

可能的原因

SOLUTIONS

解决方案

LINKS

链接

回答by Bahadir Tasdemir

回答by JustLearning

回答by David I. Samudio

回答by Guest

回答by Stanley Okpala Nwosa

回答by Tomás Gaete

回答by Taian

相关推荐

为什么在 JavaScript 中更改数组会影响数组的副本？

Javascript => 在节点 js 中是什么意思

Javascript 如何从switch语句中获取返回值？

Javascript 未捕获的类型错误：this.state.data.map 不是函数

相关推荐

最近更新

标签