Web开发学习

Datatables在表格中高亮显示搜索结果

最近在写一个WordPress主题的翻译系统,在词语展示中使用了datatables这个jQuery插件,因为以前使用过感觉这个插件的功能还是蛮强大的,尤其是实时搜索功能,在使用过程中向把实时搜索结果进行高亮显示,通过寻找官方文档终于找到解决方法。

官方的说明:https://datatables.net/blog/2014-10-22

解决方法

第一步:引入datatables的高亮显示插件,下载地址:http://bartaz.github.io/sandbox.js/jquery.highlight.js。前提是之前正确引入了datatables的相关文件,表格能正常显示。

第二步:添加样式,将样式添加到页面head或者样式表文件中。下面是我的样式,注意名称必须是highlight,否则不能正常显示

.highlight {
	color:red;
	border-bottom:1px dashed red;
	padding:2px;
}

第三步:定义js,下面是我的js文件部分

var wordstable = $('#words-table').DataTable({
		processing: true,
		responsive: true,
		fixedHeader: true,
		serverSide: true,
		ajax: {
			url: "./inc/get_data.php",
		},
		columns: [
			{ data: "wid" },
			{ data: "en" },
			{ data: "baidu" },
			{ data: "google" },
			{ data: "other" },
		],
		pageLength: 40,
});

//高亮显示控制
	wordstable.on('draw', function () {
		var tablebody = $(wordstable.table().body());
		tablebody.unhighlight();
		tablebody.highlight(wordstable.search());
	});

最后的效果

头像

业余程序猿

About Author

一个爱好写代码的金融从业者

You may also like

Web开发学习 系统相关

VPS数据盘又罢工了

上次vps出现问题是8月的时候,不能登录
Web开发学习 系统相关

密码保护:关于Let’s Encrypt证书的相关操作

无法提供摘要。这是一篇受保护的文章。