Question

我收到以下错误：

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

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

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

所以我猜这是失败的原因。

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>

另外，columns.AdoptionTaskInfo.columns＆amp;响应对象数组存在。不知道如何调试什么错误..任何建议都会有所帮助..

Answer 1

问题在于＆lt; th＆gt;的数量。标签需要匹配配置中的列数（带有键的数组＆＃34;列＆＃34;）。如果有更少的＆lt; th＆gt;标签比指定的列，您得到这个稍微加密的错误消息。

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

Answer 2

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

简而言之，您必须在任何地方都看到列数量和索引。

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

固定代码：

    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 3

我在表头中设置colspan时出现此问题。所以我的表是：

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

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

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

然后我将其更改为：

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

一切都运转良好。

Answer 4

对我来说，数据列 {data: columnName} 有更多列比表头<th>Column Name</th>

Answer 5

确保输入数据response[i]和response[i][j]不是undefined / null。

如果是，请用“”替换它们。

Answer 6

在大多数情况下，表头计数和数据cel计数不匹配

Answer 7

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

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

Answer 8

有趣的是，我因为一对/三对过多而收到以下错误，但Google仍然将我引导到这里。我将其写下来，以便人们查找。

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

解决方案非常简单。

＆＃13;

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

＆＃13;

                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>

＆＃13;

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

Answer 10

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

Answer 11

可能的原因

表头或表尾中的th元素数与表主体中的列数不同，或使用columns选项定义。
属性colspan用于表标题中的th元素。
在columnDefs.targets选项中指定的列索引不正确。

解决方案

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

链接

有关更多信息，请参见jQuery DataTables: Common JavaScript console errors - TypeError: Cannot read property ‘style’ of undefined。

Answer 12

我解决了此错误，通过用https://code.jquery.com/jquery-3.5.1.min.js替换src属性，此问题是由JQuery的精简版引起的。

Answer 13

这里的答案让我走上了正确的道路，但没有一个给我我需要的完整答案。我使用 destroy: true 作为一个选项，但在 DataTable 的第二次迭代中，我不断收到原始问题中的错误。

相反，我不得不直接调用 destroy() 方法，和清除 HTML 的子实体以强制 DataTables 在每次迭代时正确重新绘制 DataTable，而不会在<th> 标头和在 columns: 中传递的标头如下：

if ($.fn.DataTable.isDataTable('#results_table')) {
    $('#results_table').DataTable().destroy();
}
$('#results_table thead').empty();
$('#results_table tbody').empty();

$('#results_table').DataTable({
    data: data,
    columns: columns,
    ...etc...
});

DataTables：无法读取未定义的属性样式

13 个答案:

可能的原因

解决方案

链接