datatables:Uncaught TypeError: Cannot set properties of undefined (setting ‘_DT_CellIndex‘)

原创已于 2022-04-28 10:38:05 修改 · 3.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#datatables #前端

于 2022-04-27 20:18:05 首次发布

前端开发同时被 2 个专栏收录

70 篇文章

订阅专栏

javascript

43 篇文章

订阅专栏

在使用Datatables插件时，遇到一个错误：Uncaught TypeError: Cannot set properties of undefined (setting '_DT_CellIndex')。经过排查，发现错误源于在表格无数据时添加的一个空行，td的colspan与th数量不匹配。解决办法是避免使用colspan进行列合并，并确保th和td列数绝对匹配。为显示无数据提示，正确做法是通过设置Datatables的`language.emptyTable`选项。

最近在使用datatables做一些表格，觉着里面的固定列的效果不错，就直接拿来这个插件来使用了，但是今天突然发现一个问题，报错了：

jquery.min.js:2 Uncaught TypeError: Cannot set properties of undefined (setting '_DT_CellIndex')
    at ab (datatables.min.js:49:499)
    at ia (datatables.min.js:44:467)
    at HTMLTableRowElement.<anonymous> (datatables.min.js:45:79)
    at jquery.min.js:2:1567
    at Function.map (jquery.min.js:2:3536)
    at S.fn.init.map (jquery.min.js:2:1535)
    at Ja (datatables.min.js:45:44)
    at f (datatables.min.js:120:1)
    at HTMLTableElement.<anonymous> (datatables.min.js:120:184)
    at Function.each (jquery.min.js:2:3003)

报了这样的一些错误，但是我翻开其他的也使用了这个表格插件的页面，一切运行正常，没有任何问题，这是什么原因。

没有找到问题的原因，那就来个嘴笨的办法吧，排除法，一点一点的排除，逐步将这个页面所关联的js、html、css清理掉，最后发现问题好了。

原来是我在处理表格没有数据的时候，加了一个空行：

<tr>
    <td colspan="12">暂无数据！</td>
</tr>

在没有数据的时候，我使用这样的一个空行去提示。问题就出在了这里，我去掉了这个空行之后，效果一切正常。

原来在使用datatables的时候，如果td和th的列数匹配不上，就会报这样的错误，那么我这里虽然使用了colspan做列的合并，虽然逻辑上td和th的数量是不匹配的，但是绝对值上不匹配，也就报错了。

在使用datatables的时候：

1. 不要使用colspan做列的合并；

2. 注意th和td列的数量的绝对匹配；

那么怎么实现在表格没有数据时的提示信息展示呢？

其实只需要一个简单的配置即可：

$('#example').dataTable( {
    "language": {
        "emptyTable": "暂无数据!"
    }
});