How to achieve result highlighting effect for DataTables search box query-JS Tutorial-php.cn

The content of this article is to introduce how to achieve the result highlighting effect of DataTables search box query. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

DataTables is an encapsulated HTML table plug-in that enriches the style of HTML tables and provides a variety of advanced table functions such as instant search and paging. Users can write very little code (even just use the official sample code) and make a beautiful table to display data. For more information about DataTables, please see: http://www.datatables.club/, https://datatables.net/. The following figure will show the relevant data of Nanjing tourist attractions travel notes, displayed in the DataTables table.

How to achieve result highlighting effect for DataTables search box query

How to achieve result highlighting effect for DataTables search box query在DataTables表格中展示出来

The instant search, paging and other functions in the above DataTable table are created It exists after the DataTables object, so there is no need to write related code. "Instant search" means that as the characters entered change, changing matching information will appear in the table.

How to achieve result highlighting effect for DataTables search box query

However, DataTables itself does not provide the function of highlighting search results. You need to introduce relevant JavaScript files and write relevant codes. DataTables Chinese website provides this js file, but in the example there is one less statement to set the style, so the highlighting function cannot be realized. http://www.datatables.club/blog/2014/10/22/search-result-highlighting.html

How to achieve result highlighting effect for DataTables search box query

##1. DataTables related code

1. Code skeleton

Need to be introduced to use DataTables table jQuery; the example uses the online 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>

Copy after login

2. Create a table

Create a

element in the tag and set Table header information.

<body>
    <table id="table" class="display">
        <thead>
            <tr>
                <th>昵称</th>
                <th>所在地</th>
                <th>游记文章</th>
                <th>出发时间</th>
                <th>出行天数</th>
                <th>人物</th>
                <th>人均费用</th>
                <th>相关链接</th>
            </tr>
        </thead>
        
        <tbody>
        
        </tbody>
    </table>
</body>

Copy after login

3. Configure table as DataTable

<body>
    <table id="table" class="display">
        <thead>
            <tr>
                <th>昵称</th>
                <th>所在地</th>
                <th>游记文章</th>
                <th>出发时间</th>
                <th>出行天数</th>
                <th>人物</th>
                <th>人均费用</th>
                <th>相关链接</th>
            </tr>
        </thead>
        
        <tbody>
        
        </tbody>
    </table>
    
    <!-- DataTables 数据源 -->
    <script src="南京游记.js"></script>
    
    <!-- DataTables 设置 -->
    <script>
        $(document).ready(function(){
            var table=$(&#39;#table&#39;).DataTable({
                data:data,
                columns:[
                    {data:&#39;昵称&#39;},
                    {data:&#39;所在地&#39;},
                    {data:&#39;游记文章&#39;},
                    {data:&#39;出发时间&#39;},
                    {data:&#39;出行天数&#39;},
                    {data:&#39;人物&#39;},
                    {data:&#39;人均费用&#39;},
                    {data:&#39;相关链接&#39;}
                ]
            })
        });
    </script>
</body>

Copy after login

How to achieve result highlighting effect for DataTables search box query



    
    ..
    
    
    
    
    
    
    
    

<body>
    <table id="table" class="display">
        <thead>
            <tr>
                <th>昵称</th>
                <th>所在地</th>
                <th>游记文章</th>
                <th>出发时间</th>
                <th>出行天数</th>
                <th>人物</th>
                <th>人均费用</th>
                <th>相关链接</th>
            </tr>
        </thead>
        
        <tbody>
        
        </tbody>
    </table>
    
    <!-- DataTables 数据源 -->
    <script src="南京游记.js"></script>
    
    <!-- DataTables 设置 -->
    <script>
        $(document).ready(function(){
            var table=$(&#39;#table&#39;).DataTable({
                data:data,
                columns:[
                    {data:&#39;昵称&#39;},
                    {data:&#39;所在地&#39;},
                    {data:&#39;游记文章&#39;},
                    {data:&#39;出发时间&#39;},
                    {data:&#39;出行天数&#39;},
                    {data:&#39;人物&#39;},
                    {data:&#39;人均费用&#39;},
                    {data:&#39;相关链接&#39;}
                ]
            })
        });
    </script>
</body>

Copy after login

2. The official search box highlighting method

DataTables Chinese website provides a method of highlighting (http://www.datatables.club/blog/2014/10/22/search-result-highlighting.html). The provided js file can be implemented Highlighting function, but you need to add the