jquery datatable无数据提示不居中显示

原文地址：https://www.jianshu.com/p/fc4784d11722

昨天遇到一个问题，datatable生成的表格没有数据，但是“No data found”没有居中，根本原因是clospan属性值设置不正确。排查发现这个问题只出现在渲染时处于不可见状态的表格。

 

解决办法：改jquery.dataTables.js的源码。return$(_pluck( oSettings.aoColumns,'nTh') ).filter(':visible').length;这一步返回的是可见列的数量，改成return$(_pluck( oSettings.aoColumns,'nTh') ).length;就是返回所有列的数量。如果采取这种办法，请先保证不会影响其他功能。

 

通过很长时间的研究，确定是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，所以提示信息没有居中。