原来搜索是每敲击一次按键就提交搜索一次,浪费资源
Datatables的全局搜索框(global search box)在输入汉字时,会随着键盘字母一个一个的敲入,都会对其进行提交后台数据库搜索。其结果不是想要的,最后确认汉字输进去后,再提交的结果才是需要的结果,前边那么多次搜索有些浪费资源。
重新赋码,判断是中文汉字后,再提交搜索,节约资源
代码片段.
$('input[aria-controls="example"]') //找到全局搜索框,,加上汉字判断,是汉字才搜索
.off() //off()换掉原来搜素
.on( 'keyup', function (e) { //原来是捕捉keyup change blur三个事件,会重复提交搜索,把change blur去掉
var isHZ=false;
var RegHZ = /^[\u4e00-\u9fa5]+$/; //汉字范围正则表达式
if (RegHZ.test(this.value)) {isHZ=true;}else{isHZ=false;}
if ((isHZ&&e.keyCode!=8)||(e.keyCode==13)){ //防止回退删除时还搜索
$("input[name^='col_']").each(function(){ //清除各列搜索内容,input框里不显示了,但还没真正清除掉
this.value='';
});
oTable_Main.columns().search(""); //清除各列搜索内容,才真正清除掉了,防止互相干扰
oTable_Main //提交搜索
.search( this.value )
.draw();
}
} );
- 找到全局搜索。主表是oTable_Main,当前的全局搜索框定位是**$(‘input[aria-controls=“example”]’)**,没有找到id,name类的属性进行引用;
- 关掉原提交功能off();
- 设置 汉字正则判断 功能;
- 防止按Backspace键(值:8)回退时还提交搜索,但回车键Enter(值:13)还是可以提交搜索的;
- 清除各列搜索框内容,防止全局搜索与各列单独搜索时互相干扰;
- 提交搜索;
[1]: http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference
[2]: https://mermaidjs.github.io/
[3]: https://mermaidjs.github.io/
[4]: http://adrai.github.io/flowchart.js/
针对Datatables全局搜索框在输入汉字时频繁提交搜索的问题,本文介绍了一种优化方案,通过添加汉字判断,避免不必要的资源浪费,提升搜索效率。

被折叠的 条评论
为什么被折叠?



