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

javascript jquery node.js datatables

2022-08-30 02:06:47

我收到以下错误：

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>

此外，列。AdoptionTaskInfo.columns & response object arrays 存在。不知道如何调试问题。.任何建议都会有所帮助。

答案 1

问题在于，<th> 标记的数量需要与配置中的列数（具有键“columns”的数组）中的列数匹配。如果<th>标记数少于指定的列，则会收到此略显隐晦的错误消息。

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

答案 2

可能的原因

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

解决方案

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

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

可能的原因

解决 方案

链接

解决方案