当前位置： 移动技术网 > IT编程>网页制作>CSS > 实现DataTables搜索框查询结果高亮显示

实现DataTables搜索框查询结果高亮显示

2018年10月19日  | 移动技术网IT编程  | 我要评论

datatables是封装好的html表格插件，丰富了html表格的样式，提供了即时搜索、分页等多种表格高级功能。用户可以编写很少的代码（甚至只是使用官方的示例代码），做出一个漂亮的表格以展示数据。关于datatables的更多信息，请查看：、。下图将要展示的南京景点游记的相关数据，在datatables表格中展示出来。

游记数据

游记数据在datatables表格中展示出来

上面datatable表格中的即时搜索、分页等功能是创建好datatables对象后就有的，不用编写相关代码。“即时搜索”是指随着键入字符的变化，表格中会出现变化着的匹配信息。

查询一个人

但是datatables本身没有提供搜索结果高亮显示的功能，需要引入相关javascript文件并编写相关代码。datatables中文网提供了这一js文件，但是例子中少写了一条设置样式的语句，所以无法实现高亮显示的功能。

查询南京

一、datatables的相关代码

1.代码骨架

　　使用datatables表格需要引入jquery；例子使用了在线的datatables cdn。

 1 <html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>..</title>
 5     
 6     <!-- jquery 引入 -->
 7     <script src="jquery-3.0.0.min.js"></script>
 8     
 9     <!-- datatables 引入 -->
10     <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.datatables.min.css">
11     <script src="http://cdn.datatables.net/1.10.15/js/jquery.datatables.min.js"></script>
12 </head>
13 
14 <body>
15 
16 </body>
17 </html>

2.创建表格

　　在<body></body>标签中创建一个<table>元素，设置table表格的表头信息。

 1 <body>
 2     <table id="table" class="display">
 3         <thead>
 4             <tr>
 5                 <th>昵称</th>
 6                 <th>所在地</th>
 7                 <th>游记文章</th>
 8                 <th>出发时间</th>
 9                 <th>出行天数</th>
10                 <th>人物</th>
11                 <th>人均费用</th>
12                 <th>相关链接</th>
13             </tr>
14         </thead>
15         
16         <tbody>
17         
18         </tbody>
19     </table>
20 </body>

 3.配置table成datatable

　　<script></script>标签中对datatable进行相关设置，这里不对其他样式进行设置，只配置表格的数据源。datatables表格支持多种数据源，javascript对象数组、ajax返回来的数据、json格式数据等等。这里将excel表格中的数据以对象数组的形式存放在"南京游记.js"文件里（数组中每一个元素是一个对象，即一条游记记录信息），再在datatables所在html页面中src引入（"南京景点.js"文件中只有一个javascript对象数组）。采用这种方法配置数据源，需要在datatable的构造函数中设置columns属性，注意这里和table表头信息要相对应。关于datatables样式设置及数据源配置的其他方式请查看官方文档中的相关内容：。

 1 <body>
 2     <table id="table" class="display">
 3         <thead>
 4             <tr>
 5                 <th>昵称</th>
 6                 <th>所在地</th>
 7                 <th>游记文章</th>
 8                 <th>出发时间</th>
 9                 <th>出行天数</th>
10                 <th>人物</th>
11                 <th>人均费用</th>
12                 <th>相关链接</th>
13             </tr>
14         </thead>
15         
16         <tbody>
17         
18         </tbody>
19     </table>
20     
21     <!-- datatables 数据源 -->
22     <script src="南京游记.js"></script>
23     
24     <!-- datatables 设置 -->
25     <script>
26         $(document).ready(function(){
27             var table=$('#table').datatable({
28                 data:data,
29                 columns:[
30                     {data:'昵称'},
31                     {data:'所在地'},
32                     {data:'游记文章'},
33                     {data:'出发时间'},
34                     {data:'出行天数'},
35                     {data:'人物'},
36                     {data:'人均费用'},
37                     {data:'相关链接'}
38                 ]
39             })
40         });
41     </script>
42 </body>

 　　南京游记js文件

 1 <html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>..</title>
 5     
 6     <!-- jquery 引入 -->
 7     <script src="jquery-3.0.0.min.js"></script>
 8     
 9     <!-- datatables 引入 -->
10     <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.datatables.min.css">
11     <script src="http://cdn.datatables.net/1.10.15/js/jquery.datatables.min.js"></script>
12     
13 </head>
14 
15 <body>
16     <table id="table" class="display">
17         <thead>
18             <tr>
19                 <th>昵称</th>
20                 <th>所在地</th>
21                 <th>游记文章</th>
22                 <th>出发时间</th>
23                 <th>出行天数</th>
24                 <th>人物</th>
25                 <th>人均费用</th>
26                 <th>相关链接</th>
27             </tr>
28         </thead>
29         
30         <tbody>
31         
32         </tbody>
33     </table>
34     
35     <!-- datatables 数据源 -->
36     <script src="南京游记.js"></script>
37     
38     <!-- datatables 设置 -->
39     <script>
40         $(document).ready(function(){
41             var table=$('#table').datatable({
42                 data:data,
43                 columns:[
44                     {data:'昵称'},
45                     {data:'所在地'},
46                     {data:'游记文章'},
47                     {data:'出发时间'},
48                     {data:'出行天数'},
49                     {data:'人物'},
50                     {data:'人均费用'},
51                     {data:'相关链接'}
52                 ]
53             })
54         });
55     </script>
56 </body>
57 </html>
全部代码

 

二、官方提供的搜索框高亮显示的方法

　　datatables中文网提供了高亮显示的一种方法（），提供的js文件是可以实现高亮显示功能的，但是要在<head></head>中添加<style>样式以设置高亮显示的颜色，否则将没有高亮显示的效果。

1     <!-- datatables搜索内容后高亮显示 -->
2     <style>
3         .highlight {
4             background-color: skyblue
5         }
6     </style>

　　这种方法的具体步骤为：

　　1.将提供的js文件复制后保存成一个js文件，并在代码中src引入

　　highlightjs1

　　2.在datatable的构造函数后，添加table的draw事件，即时搜索框中字符变化时会触发事件

 1     <!-- datatables 设置 -->
 2     <script>
 3         $(document).ready(function(){
 4             var table=$('#table').datatable({
 5                 data:data,
 6                 columns:[
 7                     {data:'昵称'},
 8                     {data:'所在地'},
 9                     {data:'游记文章'},
10                     {data:'出发时间'},
11                     {data:'出行天数'},
12                     {data:'人物'},
13                     {data:'人均费用'},
14                     {data:'相关链接'}
15                 ]
16             });
17             
18             //监听datatable重绘事件（*）
19             table.on('draw', function () {
20                 var body = $(table.table().body());
21                 body.unhighlight();
22                 body.highlight(table.search());
23             });
24         });
25     </script>
 1 <html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>..</title>
 5     
 6     <!-- jquery 引入 -->
 7     <script src="jquery-3.0.0.min.js"></script>
 8     
 9     <!-- datatables 引入 -->
10     <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.datatables.min.css">
11     <script src="http://cdn.datatables.net/1.10.15/js/jquery.datatables.min.js"></script>
12     
13     <!-- datatables搜索框查询结果高亮显示 -->
14     <script src="highlight.js"></script>
15     
16     <!-- datatables搜索内容后高亮显示 -->
17     <style>
18         .highlight {
19             background-color: skyblue
20         }
21     </style>
22 </head>
23 
24 <body>
25     <table id="articlestable" class="display">
26         <thead>
27             <tr>
28                 <th>昵称</th>
29                 <th>所在地</th>
30                 <th>游记文章</th>
31                 <th>出发时间</th>
32                 <th>出行天数</th>
33                 <th>人物</th>
34                 <th>人均费用</th>
35                 <th>相关链接</th>
36             </tr>
37         </thead>
38         <tbody>
39         
40         </tbody>
41     </table>
42     
43     <script src="南京游记.js"></script>
44     
45     <!-- datatables 设置 -->
46     <script>
47         $(document).ready(function(){
48             var table=$('#articlestable').datatable({
49                 data:data,
50                 columns:[
51                     {data:'昵称'},
52                     {data:'所在地'},
53                     {data:'游记文章'},
54                     {data:'出发时间'},
55                     {data:'出行天数'},
56                     {data:'人物'},
57                     {data:'人均费用'},
58                     {data:'相关链接'}
59                 ]
60             });
61             
62             //监听datatable重绘事件（*）
63             table.on('draw', function () {
64                 var body = $(table.table().body());
65                 body.unhighlight();
66                 body.highlight(table.search());
67             });
68         });
69     </script>
70 </body>
71 </html>
全部代码

　　注意，官网提供的这个js文件中，定义高亮显示的函数是highlight()，去除高亮显示的函数是unhighlight()。

 

三、搜索框查询结果高亮显示的其他方法

　　。这里提供了可以实现高亮显示功能的其他两个javascript文件，如果引入这里面的js文件，高亮显示的函数是highlight()没有变，但去除高亮显示的函数变成了removehighlight()。

　　引入这3个js文件中的任一个并编写相应高亮/去高亮的代码语句，都是可以实现datatables搜索框查询结果高亮显示功能的，但是注意要在<head></head>标签中设置高亮显示的背景颜色，否则没有高亮显示的效果。

 

四、总结

　　实现datatables搜索框查询结果高亮显示的功能需要引入javascript文件，文中提供了3种这类文件，并说明了要配套编写的相关代码。

文中例子的链接分享：https://pan.baidu.com/s/1st3k9txskhx-ynas7w5ghw

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网