實現DataTables搜索框查詢結果高亮顯示

時間 2019-11-11

標籤實現 datatables 搜索查詢結果顯示简体版

原文原文鏈接

DataTables是封裝好的HTML表格插件，豐富了HTML表格的樣式，提供了即時搜索、分頁等多種表格高級功能。用戶能夠編寫不多的代碼（甚至只是使用官方的示例代碼），作出一個漂亮的表格以展現數據。關於DataTables的更多信息，請查看：http://www.datatables.club/、https://datatables.net/。下圖將要展現的南京景點遊記的相關數據，在DataTables表格中展現出來。javascript

上面DataTable表格中的即時搜索、分頁等功能是建立好DataTables對象後就有的，不用編寫相關代碼。「即時搜索」是指隨着鍵入字符的變化，表格中會出現變化着的匹配信息。css

可是DataTables自己沒有提供搜索結果高亮顯示的功能，須要引入相關JavaScript文件並編寫相關代碼。DataTables中文網提供了這一js文件，可是例子中少寫了一條設置樣式的語句，因此沒法實現高亮顯示的功能。http://www.datatables.club/blog/2014/10/22/search-result-highlighting.htmlhtml

1、DataTables的相關代碼前端

1.代碼骨架java

　　使用DataTables表格須要引入jQuery；例子使用了在線的DataTables CDN。jquery

 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.建立表格ajax

　　在<body></body>標籤中建立一個<table>元素，設置table表格的表頭信息。json

 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樣式設置及數據源配置的其餘方式請查看官方文檔中的相關內容：https://datatables.net/examples/index。ide

 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>

 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>

所有代碼

2、官方提供的搜索框高亮顯示的方法

　　DataTables中文網提供了高亮顯示的一種方法（http://www.datatables.club/blog/2014/10/22/search-result-highlighting.html），提供的js文件是能夠實現高亮顯示功能的，可是要在<head></head>中添加<style>樣式以設置高亮顯示的顏色，不然將沒有高亮顯示的效果。

1     <!-- DataTables搜索內容後高亮顯示 -->
2     <style>
3         .highlight {
4             background-color: skyblue
5         }
6     </style>

　　這種方法的具體步驟爲：

　　1.將提供的js文件複製後保存成一個js文件，並在代碼中src引入

　　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()。

3、搜索框查詢結果高亮顯示的其餘方法

　　https://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html。這裏提供了能夠實現高亮顯示功能的其餘兩個JavaScript文件，若是引入這裏面的js文件，高亮顯示的函數是highlight()沒有變，但去除高亮顯示的函數變成了removeHighlight()。

　　引入這3個js文件中的任一個並編寫相應高亮/去高亮的代碼語句，都是能夠實現DataTables搜索框查詢結果高亮顯示功能的，可是注意要在<head></head>標籤中設置高亮顯示的背景顏色，不然沒有高亮顯示的效果。

4、總結

　　實現DataTables搜索框查詢結果高亮顯示的功能須要引入JavaScript文件，文中提供了3種這類文件，並說明了要配套編寫的相關代碼。