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

117

我收到以下错误：

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>

此外，还存在column.AdoptionTaskInfo.columns和响应对象数组。不确定如何调试出什么问题。任何建议都将有所帮助。

javascript  jquery  node.js  datatables 
— 菜鸟
source
2
.style在您的代码中查找。您正在尝试访问未定义变量的属性。您可以从那里进行调试。
— Jecoms's
80
检查您尝试获取的列数是否与创建的<th>数相同。
— matrixguy 2016年
12
第th列数与javascript中定义的列数不匹配，从而导致此问题。
— Dhanuka777 '16

Answers:

283

问题是<th>标记的数量必须与配置（具有键“ columns”的数组）中的列数匹配。如果<th>标记少于指定的列，则会收到此含糊不清的错误消息。

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

— 埃伦克罗纳
source
2
我想补充一点，也许有人发现它在某些情况下很有帮助，如果您未定义dataSrc，则在json中使用“数据”，如果使用其他名称，则会收到此错误。
— 艾哈迈德·桑尼
另外，如果您的列不可见但包含在搜索或编辑器之类的列中，则它们必须位于列的末尾：[]列表。
— 蒂姆·迪尔伯恩
24

可能的原因

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

解决方案

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

链接

有关更多信息，请参见jQuery数据表：常见的JavaScript控制台错误-TypeError：无法读取未定义的属性“ style”。

— Gyrocode.com
source
13

您说任何建议都会有所帮助，因此当前我解决了DataTables“无​​法读取未定义的属性'style'的问题”，但是我的问题基本上是在数据表启动阶段使用错误的索引columnDefs。我有9列，索引为0、1、2，..，8，但是我为9和10使用了索引，因此在解决了错误的索引问题之后，故障就消失了。我希望这有帮助。

简而言之，您必须观察各列的数量和索引是否一致。

越野车代码：

    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
        ]
    });
— 巴哈迪尔（Bahadir Tasdemir）
source
这救了我，谢谢。我使用“ aTargets”：[7]，因此出错，因为不存在索引为7的列。legacy.datatables.net
— usage/
1
太好了，我很高兴我的回答解决了您的问题，请+票
— Bahadir Tasdemir '19
10

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

一切正常。

— 公正学习
source
4

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

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

— 戴维·萨穆迪奥
source
3

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

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

— 客人
source
2

解决方案非常简单。 

  <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>
展开摘要

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

— 斯坦利·奥克帕拉·努萨（Stanley Okpala Nwosa）
source
1

有趣的是，由于一对/三对过多，我收到了以下错误，但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)
— 托马斯·盖特
source
0

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

— 泰安
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.