最近在使用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": "暂无数据!"
}
});