DataTables：无法读取undefined的属性风格
我遇到以下错误：
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＆响应对象数组存在。 不知道如何debugging什么是错误的任何build议将是有益的..
问题是，<th>标签的数量需要匹配configuration中的列数（带有“列”键的数组）。 如果<th>标签less于指定的列，则会得到这个稍微有点隐含的错误信息。
（正确的答案已经作为一个评论，但我重复它作为一个答案，所以它更容易find – 我没有看到评论）
确保在input数据中， response[i]和response[i][j]不是undefined / null 。
如果是这样，请用“”replace它们。
你说任何build议都将是有益的，所以目前我解决了我的DataTables“不能读取未定义”的属性风格的问题，但我的问题是基本上在数据表启动阶段的columnDefs部分使用错误的索引。 我得到9列，索引是0,1,2，…，8但是我使用了9和10的索引，所以在修复错误的索引问题之后，错误消失了。 我希望这有帮助。
总之，如果每个地方都一致，你就得看你的专栏数量和指数。
Buggy代码：
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 ] });
绘制新的（其他）表格时也可能发生。 我解决了这个问题，首先删除了前面的表格：
$("#prod_tabel_ph").remove();
当我在表头中设置了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>
一切正常。
解决scheme非常简单。
<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>