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

小开

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

如果是，请用“”代替。

小开

您说任何建议都是有帮助的，所以目前我解决了 DataTable“无法读取未定义属性‘ 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
]
});

小开

问题是 < th > 标记的数量需要匹配配置中的列数(带有键“ column”的数组)。如果指定的 < th > 标记比指定的列少，就会得到这个稍微有点神秘的错误消息。

(正确的答案已经作为评论出现，但我重复它作为一个答案，所以它更容易找到-我没有看到评论)

小开

我在表头中设置 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>

一切正常。

小开

在绘制一个新的(其他)表时也会发生这种情况。我首先移除了前一个表，解决了这个问题:

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

小开

解决办法很简单。

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

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

小开

在我的例子中，我两次更新服务器端的数据表，它给了我这个错误。希望它能帮到别人。

小开

可能的原因

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

解决方案

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

连结

小开

有趣的是，我得到了下面的错误，有一个第三/第二对太多，仍然谷歌指示我在这里。我会把它写下来，这样人们就能找到它了。

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)

小开

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

小开

大多数情况下，当表头计数和数据单元计数不匹配时，就会发生这种情况

小开

对我来说，数据列 {data: columnName}有更多的列比桌头高

小开

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

相反，我必须直接调用 destroy()方法，还有清除 HTML 的子实体，以强制 DataTable 在每次迭代中正确地重新绘制 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...
});

小开

我在 Jquery 数据表中遇到了同样的问题。表标题中的表头(标签)数目与表体中的标签数目相同。我通过删除一个名为“ scrollX”: true”的可数据表属性来解决这个问题。那我就没事了。

小开

"aoColumns": [{
"bVisible": false,
"render": function ( data, type, full, meta )
{},
]

我通过将 bVisible 设置为 false 来解决这个问题。还可以将 bVisible 上的条件设置为“ bVisible”: var1，其中 var1可以为 true 或 false;

小开

我通过将 bVisible设置为 false来解决这个问题。您还可以将 bVisible的条件设置为 "bVisible": var1，其中 var1可以是 true或 false。