摘要：宋体三搜索框查询结果高亮显示的其他方法宋体。宋体四总结宋体实现搜索框查询结果高亮显示的功能需要引入文件，文中提供了种这类文件，并说明了要配套编写的相关代码。
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。
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>..title> 5 6 7 <script src="jquery-3.0.0.min.js">script> 8 9 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.创建表格
在标签中创建一个 3.配置table成DataTable 标签中对DataTable进行相关设置，这里不对其他样式进行设置，只配置表格的数据源。DataTables表格支持多种数据源，JavaScript对象数组、ajax返回来的数据、json格式数据等等。这里将Excel表格中的数据以对象数组的形式存放在"南京游记.js"文件里（数组中每一个元素是一个对象，即一条游记记录信息），再在DataTables所在HTML页面中src引入（"南京景点.js"文件中只有一个JavaScript对象数组）。采用这种方法配置数据源，需要在DataTable的构造函数中设置columns属性，注意这里和Table表头信息要相对应。关于DataTables样式设置及数据源配置的其他方式请查看官方文档中的相关内容：https://datatables.net/examples/index。 二、官方提供的搜索框高亮显示的方法 DataTables中文网提供了高亮显示的一种方法（http://www.datatables.club/blog/2014/10/22/search-result-highlighting.html），提供的js文件是可以实现高亮显示功能的，但是要在中添加元素，设置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>
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
22 <script src="南京游记.js">script>
23
24
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>
1 <html>
2 <head>
3 <meta charset="utf-8">
4 <title>..title>
5
6
7 <script src="jquery-3.0.0.min.js">script>
8
9
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
36 <script src="南京游记.js">script>
37
38
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>
全部代码