資訊專欄INFORMATION COLUMN
摘要：宋體三搜索框查詢結(jié)果高亮顯示的其他方法宋體。宋體四總結(jié)宋體實(shí)現(xiàn)搜索框查詢結(jié)果高亮顯示的功能需要引入文件，文中提供了種這類文件，并說明了要配套編寫的相關(guān)代碼。
DataTables是封裝好的HTML表格插件，豐富了HTML表格的樣式，提供了即時(shí)搜索、分頁等多種表格高級功能。用戶可以編寫很少的代碼（甚至只是使用官方的示例代碼），做出一個(gè)漂亮的表格以展示數(shù)據(jù)。關(guān)于DataTables的更多信息，請查看：http://www.datatables.club/、https://datatables.net/。下圖將要展示的南京景點(diǎn)游記的相關(guān)數(shù)據(jù)，在DataTables表格中展示出來。
上面DataTable表格中的即時(shí)搜索、分頁等功能是創(chuàng)建好DataTables對象后就有的，不用編寫相關(guān)代碼。“即時(shí)搜索”是指隨著鍵入字符的變化，表格中會(huì)出現(xiàn)變化著的匹配信息。
但是DataTables本身沒有提供搜索結(jié)果高亮顯示的功能，需要引入相關(guān)JavaScript文件并編寫相關(guān)代碼。DataTables中文網(wǎng)提供了這一js文件，但是例子中少寫了一條設(shè)置樣式的語句，所以無法實(shí)現(xiàn)高亮顯示的功能。http://www.datatables.club/blog/2014/10/22/search-result-highlighting.html
一、DataTables的相關(guān)代碼
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.創(chuàng)建表格
在標(biāo)簽中創(chuàng)建一個(gè) 3.配置table成DataTable 標(biāo)簽中對DataTable進(jìn)行相關(guān)設(shè)置，這里不對其他樣式進(jìn)行設(shè)置，只配置表格的數(shù)據(jù)源。DataTables表格支持多種數(shù)據(jù)源，JavaScript對象數(shù)組、ajax返回來的數(shù)據(jù)、json格式數(shù)據(jù)等等。這里將Excel表格中的數(shù)據(jù)以對象數(shù)組的形式存放在"南京游記.js"文件里（數(shù)組中每一個(gè)元素是一個(gè)對象，即一條游記記錄信息），再在DataTables所在HTML頁面中src引入（"南京景點(diǎn).js"文件中只有一個(gè)JavaScript對象數(shù)組）。采用這種方法配置數(shù)據(jù)源，需要在DataTable的構(gòu)造函數(shù)中設(shè)置columns屬性，注意這里和Table表頭信息要相對應(yīng)。關(guān)于DataTables樣式設(shè)置及數(shù)據(jù)源配置的其他方式請查看官方文檔中的相關(guān)內(nèi)容：https://datatables.net/examples/index。 二、官方提供的搜索框高亮顯示的方法 DataTables中文網(wǎng)提供了高亮顯示的一種方法（http://www.datatables.club/blog/2014/10/22/search-result-highlighting.html），提供的js文件是可以實(shí)現(xiàn)高亮顯示功能的，但是要在中添加元素，設(shè)置table表格的表頭信息。
1 <body>
2 <table id="table" class="display">
3 <thead>
4 <tr>
5 <th>昵稱th>
6 <th>所在地th>
7 <th>游記文章th>
8 <th>出發(fā)時(shí)間th>
9 <th>出行天數(shù)th>
10 <th>人物th>
11 <th>人均費(fèi)用th>
12 <th>相關(guān)鏈接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>出發(fā)時(shí)間th>
9 <th>出行天數(shù)th>
10 <th>人物th>
11 <th>人均費(fèi)用th>
12 <th>相關(guān)鏈接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:出發(fā)時(shí)間},
34 {data:出行天數(shù)},
35 {data:人物},
36 {data:人均費(fèi)用},
37 {data:相關(guān)鏈接}
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>出發(fā)時(shí)間th>
23 <th>出行天數(shù)th>
24 <th>人物th>
25 <th>人均費(fèi)用th>
26 <th>相關(guān)鏈接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:出發(fā)時(shí)間},
48 {data:出行天數(shù)},
49 {data:人物},
50 {data:人均費(fèi)用},
51 {data:相關(guān)鏈接}
52 ]
53 })
54 });
55 script>
56 body>
57 html>
全部代碼
<