实现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 ...
随机推荐
- TensorFlow从1到2（六）结构化数据预处理和心脏病预测
结构化数据的预处理 前面所展示的一些示例已经很让人兴奋.但从总体看,数据类型还是比较单一的,比如图片,比如文本. 这个单一并非指数据的类型单一,而是指数据组成的每一部分,在模型中对于结果预测的影响基本 ...
- .NET Core之微信支付之公众号、H5支付篇
前言 本篇主要记录微信支付中公众号及H5支付全过程. 准备篇 公众号或者服务号(并开通微信支付功能).商户平台中开通JSAPI支付.H5支付. 配置篇 公众号或者服务号中 -------开发----- ...
- Rest_framework Router 路由器(含SimplyRouter源码浅解)
目录 Rest_framework Router 路由器 ViewSet结合Router,自动生成url. 将ViewSet注册到Router中,需要三个要素: 关于路由规则,细分有四类: rest_ ...
- Odoo 12 开发手册指南（八）—— 业务逻辑 – 业务流程的支持
在前面的文章中,我们学习了模型层.如何创建应用数据结构以及如何使用 ORM API 来存储查看数据.本文中我们将利用前面所学的模型和记录集知识实现应用中常用的业务逻辑模式. 本文的主要内容有: 以文件 ...
- 写个重新加载 ocelot 配置的接口
写个重新加载 ocelot 配置的接口 Intro 我们想把 ocelot 的配置放在自己的存储中,放在 Redis 或者数据库中,当修改了 Ocelot 的配置之后希望即时生效,又不想在网关这边定时 ...
- 2018-09-13 代码翻译尝试-使用Roaster解析和生成Java源码
此文是前文使用现有在线翻译服务进行代码翻译的体验的编程语言方面第二点的一个尝试. 参考Which framework to generate source code ? - Cleancode and ...
- 物理dataguard 正常切换 脚色转换，switchover_status 状态改变
正常切换切换前: 主库:SQL> select DATABASE_ROLE from v$database;DATABASE_ROLE----------------PRIMARY SQL> ...
- Sqlserver 事务处理模板
USE StuDB GO /****** Object: StoredProcedure [dbo].[proc_live_send_answer_v4] Script Date: 06/20/201 ...
- Exchange-重建见证服务器和目录
问题描述: 在升级Exchange 2013 CU22检查群集节点状态的过程中发现群集组处于失败状态,具体报错信息如下:警告:数据库可用性组"***"见证处于失败状态.数据库可用性 ...
- sdk和api的区别
SDK SDK是Software Development Kit的缩写,中文意思是“软件开发工具包”.这是一个覆盖面相当广泛的名词,可以这么说:辅助开发某一类软件的相关文档.范例和工具的集合都可以叫做 ...