用过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; i >= 0; i--) {
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可以匹配出相应的中文记录。