实现DataTables搜索框查询结果高亮显示
DataTables是封装好的HTML表格插件，丰富了HTML表格的样式，提供了即时搜索、分页等多种表格高级功能。用户可以编写很少的代码（甚至只是使用官方的示例代码），做出一个漂亮的表格以展示数据。关于DataTables的更多信息，请查看：http://www.datatables.club/、https://datatables.net/。下图将要展示的南京景点游记的相关数据，在DataTables表格中展示出来。
上面DataTable表格中的即时搜索、分页等功能是创建好DataTables对象后就有的，不用编写相关代码。“即时搜索”是指随着键入字符的变化，表格中会出现变化着的匹配信息。
但是DataTables本身没有提供搜索结果高亮显示的功能，需要引入相关JavaScript文件并编写相关代码。DataTables中文网提供了这一js文件，但是例子中少写了一条设置样式的语句，所以无法实现高亮显示的功能。http://www.datatables.club/blog/2014/10/22/search-result-highlighting.html
一、DataTables的相关代码
1.代码骨架
使用DataTables表格需要引入jQuery；例子使用了在线的DataTables CDN。
<html>
<head>
<meta charset="utf-8">
<title>..</title> <!-- jQuery 引入 -->
<script src="jquery-3.0.0.min.js"></script> <!-- DataTables 引入 -->
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head> <body> </body>
</html>
2.创建表格
在<body></body>标签中创建一个<table>元素，设置table表格的表头信息。
<body>
<table id="table" class="display">
<thead>
<tr>
<th>昵称</th>
<th>所在地</th>
<th>游记文章</th>
<th>出发时间</th>
<th>出行天数</th>
<th>人物</th>
<th>人均费用</th>
<th>相关链接</th>
</tr>
</thead> <tbody> </tbody>
</table>
</body>
3.配置table成DataTable
<script></script>标签中对DataTable进行相关设置，这里不对其他样式进行设置，只配置表格的数据源。DataTables表格支持多种数据源，JavaScript对象数组、ajax返回来的数据、json格式数据等等。这里将Excel表格中的数据以对象数组的形式存放在"南京游记.js"文件里（数组中每一个元素是一个对象，即一条游记记录信息），再在DataTables所在HTML页面中src引入（"南京景点.js"文件中只有一个JavaScript对象数组）。采用这种方法配置数据源，需要在DataTable的构造函数中设置columns属性，注意这里和Table表头信息要相对应。关于DataTables样式设置及数据源配置的其他方式请查看官方文档中的相关内容：https://datatables.net/examples/index。
<body>
<table id="table" class="display">
<thead>
<tr>
<th>昵称</th>
<th>所在地</th>
<th>游记文章</th>
<th>出发时间</th>
<th>出行天数</th>
<th>人物</th>
<th>人均费用</th>
<th>相关链接</th>
</tr>
</thead> <tbody> </tbody>
</table> <!-- DataTables 数据源 -->
<script src="南京游记.js"></script> <!-- DataTables 设置 -->
<script>
$(document).ready(function(){
var table=$('#table').DataTable({
data:data,
columns:[
{data:'昵称'},
{data:'所在地'},
{data:'游记文章'},
{data:'出发时间'},
{data:'出行天数'},
{data:'人物'},
{data:'人均费用'},
{data:'相关链接'}
]
})
});
</script>
</body>
<html>
<head>
<meta charset="utf-8">
<title>..</title> <!-- jQuery 引入 -->
<script src="jquery-3.0.0.min.js"></script> <!-- DataTables 引入 -->
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> </head> <body>
<table id="table" class="display">
<thead>
<tr>
<th>昵称</th>
<th>所在地</th>
<th>游记文章</th>
<th>出发时间</th>
<th>出行天数</th>
<th>人物</th>
<th>人均费用</th>
<th>相关链接</th>
</tr>
</thead> <tbody> </tbody>
</table> <!-- DataTables 数据源 -->
<script src="南京游记.js"></script> <!-- DataTables 设置 -->
<script>
$(document).ready(function(){
var table=$('#table').DataTable({
data:data,
columns:[
{data:'昵称'},
{data:'所在地'},
{data:'游记文章'},
{data:'出发时间'},
{data:'出行天数'},
{data:'人物'},
{data:'人均费用'},
{data:'相关链接'}
]
})
});
</script>
</body>
</html>
全部代码
二、官方提供的搜索框高亮显示的方法
DataTables中文网提供了高亮显示的一种方法（http://www.datatables.club/blog/2014/10/22/search-result-highlighting.html），提供的js文件是可以实现高亮显示功能的，但是要在<head></head>中添加<style>样式以设置高亮显示的颜色，否则将没有高亮显示的效果。
<!-- DataTables搜索内容后高亮显示 -->
<style>
.highlight {
background-color: skyblue
}
</style>
这种方法的具体步骤为：
1.将提供的js文件复制后保存成一个js文件，并在代码中src引入
2.在DataTable的构造函数后，添加Table的draw事件，即时搜索框中字符变化时会触发事件
<!-- DataTables 设置 -->
<script>
$(document).ready(function(){
var table=$('#table').DataTable({
data:data,
columns:[
{data:'昵称'},
{data:'所在地'},
{data:'游记文章'},
{data:'出发时间'},
{data:'出行天数'},
{data:'人物'},
{data:'人均费用'},
{data:'相关链接'}
]
}); //监听DataTable重绘事件（*）
table.on('draw', function () {
var body = $(table.table().body());
body.unhighlight();
body.highlight(table.search());
});
});
</script>
<html>
<head>
<meta charset="utf-8">
<title>..</title> <!-- jQuery 引入 -->
<script src="jquery-3.0.0.min.js"></script> <!-- DataTables 引入 -->
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <!-- DataTables搜索框查询结果高亮显示 -->
<script src="highlight.js"></script> <!-- DataTables搜索内容后高亮显示 -->
<style>
.highlight {
background-color: skyblue
}
</style>
</head> <body>
<table id="articlesTable" class="display">
<thead>
<tr>
<th>昵称</th>
<th>所在地</th>
<th>游记文章</th>
<th>出发时间</th>
<th>出行天数</th>
<th>人物</th>
<th>人均费用</th>
<th>相关链接</th>
</tr>
</thead>
<tbody> </tbody>
</table> <script src="南京游记.js"></script> <!-- DataTables 设置 -->
<script>
$(document).ready(function(){
var table=$('#articlesTable').DataTable({
data:data,
columns:[
{data:'昵称'},
{data:'所在地'},
{data:'游记文章'},
{data:'出发时间'},
{data:'出行天数'},
{data:'人物'},
{data:'人均费用'},
{data:'相关链接'}
]
}); //监听DataTable重绘事件（*）
table.on('draw', function () {
var body = $(table.table().body());
body.unhighlight();
body.highlight(table.search());
});
});
</script>
</body>
</html>
全部代码
注意，官网提供的这个js文件中，定义高亮显示的函数是highlight()，去除高亮显示的函数是unhighlight()。
三、搜索框查询结果高亮显示的其他方法
https://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html。这里提供了可以实现高亮显示功能的其他两个JavaScript文件，如果引入这里面的js文件，高亮显示的函数是highlight()没有变，但去除高亮显示的函数变成了removeHighlight()。
引入这3个js文件中的任一个并编写相应高亮/去高亮的代码语句，都是可以实现DataTables搜索框查询结果高亮显示功能的，但是注意要在<head></head>标签中设置高亮显示的背景颜色，否则没有高亮显示的效果。
四、总结
实现DataTables搜索框查询结果高亮显示的功能需要引入JavaScript文件，文中提供了3种这类文件，并说明了要配套编写的相关代码。
实现DataTables搜索框查询结果高亮显示的更多相关文章
- C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例
C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...
- python selenium 时间搜索框查询和日期大小比较
在做selenium自动化的时候遇到 时间搜索框查询(如下图)并比较查询结果是否在输入的时间之类. 首先,第一步要做的就是选择时间,并获取到所选时间的文本信息 如上图所示,获取到的时间搜索框并没有文本 ...
- select2搜索框查询加遍历
<div class="form-group"> <label class="control-label col-sm-1 no-padding-rig ...
- angular实现输入框输入添加 搜索框查询
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g ...
- bootStrap-table服务器端后台分页的使用，以及自定义搜索框的实现，前端代码到数据查询超详细讲解
关于分页,之前一直纯手写js代码来实现,最近又需要用到分页,找了好多最终确定bootstrap-table,正好前端页面用的是bootstrap. 首先下载BootStrap-table的js和CSS ...
- 向DataGrid数据表格增加查询搜索框
向DataGrid数据表格增加查询搜索框 效果如下: js代码: $(function(){ var dg = $('#dg').datagrid({ url:"${pageContext. ...
- Mybatis mysql 一个搜索框多个字段模糊查询 几种方法
第一种 or 根据搜索框给定的关键词,模糊搜索用户名和账号都匹配的用户集合 <select id="list" parameterType="com.user.Us ...
- jQuery搜索框输入实时进行查询
在手机上,我们期望在搜索框中输入数据,能够实时更新查询出来的内容,不需要按回车. 实现方式为: $(".search").bind("input propertychan ...
- dataTables去掉搜索框和每页多少条框体，解决Cannot reinitialise DataTable问题
$('#example').DataTable({ searching:false, //去掉搜索框 bLengthChange:false,//去掉每页多少条框体 "language&qu ...
随机推荐
- C#爬虫使用代理刷csdn文章浏览量
昨天写了一篇关于“c#批量抓取免费代理并验证有效性”的文章,接着昨天的目标继续完成吧,最终实现的目的就是刷新csdn文章的浏览量(实际上很简单,之前博客园的文章也是可以使用代理ip来刷的,后来不行了) ...
- .Net Core使用Redis(CSRedis)
前言 CSRedis是国外大牛写的.git地址:https://github.com/2881099/csredis,让我们看看如果最简单的 使用一下CSRedis吧. 引入NuGet 获取Nuget ...
- Protocol Buffers（1）：序列化、编译与使用
目录 序列化与反序列化 Protocol Buffers概览 Protocol Buffers C++ 编译 Protocol Buffers C++ 使用 Protocol Buffers的可读性 ...
- token:NLP之词形还原
已迁移到我新博客,阅读体验更佳token:NLP之词形还原 完整代码实现放在我的github上:click me 一.任务描述 形态还原算法: 输入一个单词 如果词典里有该词,输出该词及其属性,转4, ...
- 10 年三线小城 IT 开发的感悟
一贯都是写技术博客,从来没写过感悟类文章,因为文笔不好.今天看到了大飞的一篇文章,<技术人,请不要封闭自己>,真的感触太深了. 一 先说说我自己,我并非科班出身,大学毕业后一直没找到好的工 ...
- Python爬虫使用lxml模块爬取豆瓣读书排行榜并分析
上次使用了BeautifulSoup库爬取电影排行榜,爬取相对来说有点麻烦,爬取的速度也较慢.本次使用的lxml库,我个人是最喜欢的,爬取的语法很简单,爬取速度也快. 本次爬取的豆瓣书籍排行榜的首页地 ...
- Redis调用的流程（新手使用）
就用查省市为例,别人还没查就把所有都弄好,很浪费资源和时间,redis是为了存储常用的查询操作的[结果],以此来减少直接查询数据库的次数,以下内容仅供参考,请勿照抄.(如有说得不好之处,请指点.) 言 ...
- css常见的各种布局上（两列布局）
常见的布局上(两列布局) 1.常见的两列布局 1.1左边固定,右边自适应,左边宽度已知,右边默认占满整行,使用left 左浮动,右边不浮动,设置margin-left:左侧宽度 <style&g ...
- Appium的入门使用
ps:有没有人和我一样觉得Appium官方文档写的很烂的, 这官方文档,还不如很多人写的博客详细,而且对于初学的入门者实在是不够友好, 官网:https://github.com/appium/jav ...
- softmax函数详解
答案来自专栏:机器学习算法与自然语言处理 详解softmax函数以及相关求导过程 这几天学习了一下softmax激活函数,以及它的梯度求导过程,整理一下便于分享和交流. softmax函数 softm ...