昨天遇到一个问题,datatable生成的表格没有数据,但是“No data found”没有居中,根本原因是clospan属性值设置不正确。排查发现这个问题只出现在渲染时处于不可见状态的表格。
通过很长时间的研究,确定是jQuery dataTables.js的问题。找到了空数据时生成的逻辑。源代码如下:
/* Table is empty - create a row with an empty message in it */
varsZero=oLang.sZeroRecords;
if( oSettings.iDraw==1&&_fnDataSource( oSettings ) =='ajax')
{
sZero=oLang.sLoadingRecords;
}
else if(oLang.sEmptyTable&& oSettings.fnRecordsTotal() ===0)
{
sZero=oLang.sEmptyTable;
}
关键代码:
'valign':'top',
'colSpan':_fnVisbleColumns( oSettings ),
'class': oSettings.oClasses.sRowEmpty
} ).html(sZero) )[0];
一直要找的就是这个属性,看看这个函数时如何定义的吧。看名字就知道应该和可见的列有关。愈加证明我的推测了。
/**
* Get the number of visible columns
*@param{object} oSettings dataTables settings object
*@returns{int} i the number of visible columns
*@memberofDataTable#oApi
*/
function_fnVisbleColumns( oSettings )
{
return$(_pluck( oSettings.aoColumns,'nTh') ).filter(':visible').length;
}
到这里终于找到了问题的原因,原来dataTable的clospan属性是获取所有可见列的数量。如果当时表格是隐藏的,那么可见的列数自然为0,所以clospan属性也就设置为0。当表格再次可见时,colspan的值为0,所以提示信息没有居中。
已经找到了问题,还解决不了吗?呵呵。kill it.