Datatables 全局搜索框加汉字判断后再提交后台搜索

针对Datatables全局搜索框在输入汉字时频繁提交搜索的问题,本文介绍了一种优化方案,通过添加汉字判断,避免不必要的资源浪费,提升搜索效率。

原来搜索是每敲击一次按键就提交搜索一次,浪费资源

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();
		}
	} );
  1. 找到全局搜索。主表是oTable_Main,当前的全局搜索框定位是**$(‘input[aria-controls=“example”]’)**,没有找到id,name类的属性进行引用;
  2. 关掉原提交功能off()
  3. 设置 汉字正则判断 功能;
  4. 防止按Backspace键(值:8)回退时还提交搜索,但回车键Enter(值:13)还是可以提交搜索的;
  5. 清除各列搜索框内容,防止全局搜索与各列单独搜索时互相干扰;
  6. 提交搜索;
    [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/
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值