欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

DataTables搜索框查詢怎么實(shí)現(xiàn)結(jié)果高亮顯示效果

小編給大家分享一下DataTables搜索框查詢怎么實(shí)現(xiàn)結(jié)果高亮顯示效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站制作、成都做網(wǎng)站與策劃設(shè)計(jì),石泉網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:石泉等地區(qū)。石泉做網(wǎng)站價(jià)格咨詢:13518219792

DataTables是封裝好的HTML表格插件，豐富了HTML表格的樣式，提供了即時(shí)搜索、分頁等多種表格高級功能。用戶可以編寫很少的代碼（甚至只是使用官方的示例代碼），做出一個(gè)漂亮的表格以展示數(shù)據(jù)。

DataTables搜索框查詢怎么實(shí)現(xiàn)結(jié)果高亮顯示效果

DataTables搜索框查詢怎么實(shí)現(xiàn)結(jié)果高亮顯示效果

上面DataTable表格中的即時(shí)搜索、分頁等功能是創(chuàng)建好DataTables對象后就有的，不用編寫相關(guān)代碼。“即時(shí)搜索”是指隨著鍵入字符的變化，表格中會(huì)出現(xiàn)變化著的匹配信息。

DataTables搜索框查詢怎么實(shí)現(xiàn)結(jié)果高亮顯示效果

但是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搜索框查詢怎么實(shí)現(xiàn)結(jié)果高亮顯示效果

一、DataTables的相關(guān)代碼

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.創(chuàng)建表格

在<body></body>標(biāo)簽中創(chuàng)建一個(gè)<table>元素，設(shè)置table表格的表頭信息。

<body>
    <table id="table" class="display">
        <thead>
            <tr>
                <th>昵稱</th>
                <th>所在地</th>
                <th>游記文章</th>
                <th>出發(fā)時(shí)間</th>
                <th>出行天數(shù)</th>
                <th>人物</th>
                <th>人均費(fèi)用</th>
                <th>相關(guān)鏈接</th>
            </tr>
        </thead>
        
        <tbody>
        
        </tbody>
    </table>
</body>

3.配置table成DataTable

<script></script>標(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。

<body>
    <table id="table" class="display">
        <thead>
            <tr>
                <th>昵稱</th>
                <th>所在地</th>
                <th>游記文章</th>
                <th>出發(fā)時(shí)間</th>
                <th>出行天數(shù)</th>
                <th>人物</th>
                <th>人均費(fèi)用</th>
                <th>相關(guān)鏈接</th>
            </tr>
        </thead>
        
        <tbody>
        
        </tbody>
    </table>
    
    <!-- DataTables 數(shù)據(jù)源 -->
    <script src="南京游記.js"></script>
    
    <!-- DataTables 設(shè)置 -->
    <script>
        $(document).ready(function(){
            var table=$('#table').DataTable({
                data:data,
                columns:[
                    {data:'昵稱'},
                    {data:'所在地'},
                    {data:'游記文章'},
                    {data:'出發(fā)時(shí)間'},
                    {data:'出行天數(shù)'},
                    {data:'人物'},
                    {data:'人均費(fèi)用'},
                    {data:'相關(guān)鏈接'}
                ]
            })
        });
    </script>
</body>

DataTables搜索框查詢怎么實(shí)現(xiàn)結(jié)果高亮顯示效果

<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>出發(fā)時(shí)間</th>
                <th>出行天數(shù)</th>
                <th>人物</th>
                <th>人均費(fèi)用</th>
                <th>相關(guān)鏈接</th>
            </tr>
        </thead>
        
        <tbody>
        
        </tbody>
    </table>
    
    <!-- DataTables 數(shù)據(jù)源 -->
    <script src="南京游記.js"></script>
    
    <!-- DataTables 設(shè)置 -->
    <script>
        $(document).ready(function(){
            var table=$('#table').DataTable({
                data:data,
                columns:[
                    {data:'昵稱'},
                    {data:'所在地'},
                    {data:'游記文章'},
                    {data:'出發(fā)時(shí)間'},
                    {data:'出行天數(shù)'},
                    {data:'人物'},
                    {data:'人均費(fèi)用'},
                    {data:'相關(guān)鏈接'}
                ]
            })
        });
    </script>
</body>
</html>

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

　DataTables中文網(wǎng)提供了高亮顯示的一種方法（http://www.datatables.club/blog/2014/10/22/search-result-highlighting.html），提供的js文件是可以實(shí)現(xiàn)高亮顯示功能的，但是要在<head></head>中添加<style>樣式以設(shè)置高亮顯示的顏色，否則將沒有高亮顯示的效果。

<!-- DataTables搜索內(nèi)容后高亮顯示 -->
<style>
.highlight {
background-color: skyblue
}
</style>

這種方法的具體步驟為：

1.將提供的js文件復(fù)制后保存成一個(gè)js文件，并在代碼中src引入

　DataTables搜索框查詢怎么實(shí)現(xiàn)結(jié)果高亮顯示效果

2.在DataTable的構(gòu)造函數(shù)后，添加Table的draw事件，即時(shí)搜索框中字符變化時(shí)會(huì)觸發(fā)事件

 <!-- DataTables 設(shè)置 -->
    <script>
        $(document).ready(function(){
            var table=$('#table').DataTable({
                data:data,
                columns:[
                    {data:'昵稱'},
                    {data:'所在地'},
                    {data:'游記文章'},
                    {data:'出發(fā)時(shí)間'},
                    {data:'出行天數(shù)'},
                    {data:'人物'},
                    {data:'人均費(fèi)用'},
                    {data:'相關(guān)鏈接'}
                ]
            });
            
            //監(jiān)聽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搜索框查詢結(jié)果高亮顯示 -->
    <script src="highlight.js"></script>
    
    <!-- DataTables搜索內(nèi)容后高亮顯示 -->
    <style>
        .highlight {
            background-color: skyblue
        }
    </style>
</head>

<body>
    <table id="articlesTable" class="display">
        <thead>
            <tr>
                <th>昵稱</th>
                <th>所在地</th>
                <th>游記文章</th>
                <th>出發(fā)時(shí)間</th>
                <th>出行天數(shù)</th>
                <th>人物</th>
                <th>人均費(fèi)用</th>
                <th>相關(guān)鏈接</th>
            </tr>
        </thead>
        <tbody>
        
        </tbody>
    </table>
    
    <script src="南京游記.js"></script>
    
    <!-- DataTables 設(shè)置 -->
    <script>
        $(document).ready(function(){
            var table=$('#articlesTable').DataTable({
                data:data,
                columns:[
                    {data:'昵稱'},
                    {data:'所在地'},
                    {data:'游記文章'},
                    {data:'出發(fā)時(shí)間'},
                    {data:'出行天數(shù)'},
                    {data:'人物'},
                    {data:'人均費(fèi)用'},
                    {data:'相關(guān)鏈接'}
                ]
            });
            
            //監(jiān)聽DataTable重繪事件（*）
            table.on('draw', function () {
                var body = $(table.table().body());
                body.unhighlight();
                body.highlight(table.search());
            });
        });
    </script>
</body>
</html>

注意，官網(wǎng)提供的這個(gè)js文件中，定義高亮顯示的函數(shù)是highlight()，去除高亮顯示的函數(shù)是unhighlight()。

三、搜索框查詢結(jié)果高亮顯示的其他方法

https://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html。這里提供了可以實(shí)現(xiàn)高亮顯示功能的其他兩個(gè)JavaScript文件，如果引入這里面的js文件，高亮顯示的函數(shù)是highlight()沒有變，但去除高亮顯示的函數(shù)變成了removeHighlight()。

引入這3個(gè)js文件中的任一個(gè)并編寫相應(yīng)高亮/去高亮的代碼語句，都是可以實(shí)現(xiàn)DataTables搜索框查詢結(jié)果高亮顯示功能的，但是注意要在<head></head>標(biāo)簽中設(shè)置高亮顯示的背景顏色，否則沒有高亮顯示的效果。

四、總結(jié)

實(shí)現(xiàn)DataTables搜索框查詢結(jié)果高亮顯示的功能需要引入JavaScript文件，文中提供了3種這類文件，并說明了要配套編寫的相關(guān)代碼。希望能對大家的學(xué)習(xí)有所幫助，更多相關(guān)教程請?jiān)L問 HTML視頻教程，JavaScript視頻教程，bootstrap視頻教程！

以上是DataTables搜索框查詢怎么實(shí)現(xiàn)結(jié)果高亮顯示效果的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：DataTables搜索框查詢怎么實(shí)現(xiàn)結(jié)果高亮顯示效果
當(dāng)前鏈接：http://www.chinadenli.net/article2/pesooc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、外貿(mào)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站維護(hù)、電子商務(wù)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)