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

Question

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

Roo*_*kie 99 javascript jquery datatables node.js

我收到以下错误:

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

Run Code Online (Sandbox Code Playgroud)

上面引用(匿名函数)@ VM3156:180的行是:

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

Run Code Online (Sandbox Code Playgroud)

所以我猜这是失败的地方.

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>

Run Code Online (Sandbox Code Playgroud)

此外,存在columns.AdoptionTaskInfo.columns和响应对象数组.不知道怎么调试什么是错的..任何建议都会有所帮助..

Answer 1

ehr*_*ona 243

问题是<th>标签的数量需要与配置中的列数(具有键"列"的数组)匹配.如果<th>标记少于指定的列,则会收到此隐式错误消息.

(正确的答案已作为评论出现,但我正在重复它作为答案,因此更容易找到 - 我没有看到评论)

我想补充一点，也许有人发现它在某些情况下很有用，如果您未定义dataSrc，则在json中使用“数据”，如果使用其他名称，则会收到此错误。 (2认同)

Answer 2

Bah*_*mir 13

你说任何建议都会有所帮助,所以目前我解决了我的DataTables"无法读取属性'样式'未定义"的问题,但我的问题基本上是在数据表启动阶段的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
        ]
    });

Run Code Online (Sandbox Code Playgroud)

固定代码:

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

Run Code Online (Sandbox Code Playgroud)

Answer 3

小智 12

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

Answer 4

Jus*_*ing 10

当我colspan在表头中设置时,我遇到了这个问题.所以我的桌子是:

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

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

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

Run Code Online (Sandbox Code Playgroud)

然后,一旦我将其更改为:

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

Run Code Online (Sandbox Code Playgroud)

一切都很好.