用过jQuery .dataTables的都知道该控件提供字段过滤功能。但针对中国用户的话,该过滤存在一个问题,没法根据拼音的首写字母来进行过滤。 比如某行记录里面存在”主任”,但你在表格中输入的是zr的话却检索不出来。但对于好多用户就会要求输入zr能根据首字母来进行检索,输入中文也能进行检索。 比如我现在表格数据如下:
修改前的话,你在搜索框中输入zr则效果就如下了,查询出的数据为空
必须要在搜索框中输入“主任”才能检索出数据
为了达到上面说的效果,我们首先需要做的就是引入2个关键js 方法: 第一步:是判断输入的是中文还是英文
function isChinese (str) {var badChar="ABCDEFGHIJKLMNOPQRSTUVWXYZ" ;badChar+="abcdefghijklmnopqrstuvwxyz" ;badChar+="0123456789" ;badChar+=" " +" " ;badChar+="`~!@#$%^&()-_=+]\\\\|:;\"\\\'<,>?/" ;if ("" ==str){return false }for (var i=0 ;i<str.length;i++){var c=str.charAt(i);if (badChar.indexOf(c)>-1 ){return false }}return true }
第二步是:将中文转换成拼音的方法
function CC2FPY (l1) {var l2=l1.length;var I1="" ;var reg=new RegExp ('[a-zA-Z0-9\- ]' );for (var i=0 ;i<l2;i++){var val=l1.substr(i,1 );var name=arrayFSearch(val,PinYin);if (reg.test(val)){I1+=val;}else if (name!==false ){I1+=name;}};I1=I1.replace(/ /g ,'-' );while (I1.indexOf('--' )>0 ){I1=I1.replace('--' ,'-' );};return I1;}
第三步:则是修改jquery .datables的源文件的过滤方法。 找到
function _fnFilter ( settings, input, force, regex, smart, caseInsensitive )
这句话滚动到方法底部。 将display = settings.aiDisplay;后面的代码替换成
var isChineseFlag = isChinese(input)
for (i = display.length - 1
if (isChineseFlag) {
if (!rpSearch.test (settings.aoData [display[i]]._sFilterRow)) {
display.splice (i, 1 )
}
} else {
var cc2py = CC2FPY(settings.aoData [display[i]]._sFilterRow).toString ().toLowerCase ()
if (!rpSearch.test (cc2py)) {
display.splice (i, 1 )
}
}
}
这时候就达到我们的要求了,输入“主任”的首写拼音字母zr可以匹配出相应的中文记录。