DataTables搜索框查询怎么实现结果高亮显示效果

小编给大家分享一下DataTables搜索框查询怎么实现结果高亮显示效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联公司是一家专注于成都网站制作、成都做网站与策划设计,石泉网站建设哪家好?创新互联公司做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:石泉等地区。石泉做网站价格咨询:13518219792

DataTables是封装好的HTML表格插件，丰富了HTML表格的样式，提供了即时搜索、分页等多种表格高级功能。用户可以编写很少的代码（甚至只是使用官方的示例代码），做出一个漂亮的表格以展示数据。

上面DataTable表格中的即时搜索、分页等功能是创建好DataTables对象后就有的，不用编写相关代码。“即时搜索”是指随着键入字符的变化，表格中会出现变化着的匹配信息。

但是DataTables本身没有提供搜索结果高亮显示的功能，需要引入相关JavaScript文件并编写相关代码。DataTables中文网提供了这一js文件，但是例子中少写了一条设置样式的语句，所以无法实现高亮显示的功能。http://www.datatables.club/blog/2014/10/22/search-result-highlighting.html

一、DataTables的相关代码

1.代码骨架

使用DataTables表格需要引入jQuery；例子使用了在线的DataTables cdn。

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文件是可以实现高亮显示功能的，但是要在中添加

这种方法的具体步骤为：

1.将提供的js文件复制后保存成一个js文件，并在代码中src引入

2.在DataTable的构造函数后，添加Table的draw事件，即时搜索框中字符变化时会触发事件

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    



    

        

            

                
昵称
                
所在地
                
游记文章
                
出发时间
                
出行天数
                
人物
                
人均费用
                
相关链接
            
        
        

        
        
    
    
    
    
    
    

注意，官网提供的这个js文件中，定义高亮显示的函数是highlight()，去除高亮显示的函数是unhighlight()。

三、搜索框查询结果高亮显示的其他方法

https://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html。这里提供了可以实现高亮显示功能的其他两个JavaScript文件，如果引入这里面的js文件，高亮显示的函数是highlight()没有变，但去除高亮显示的函数变成了removeHighlight()。

引入这3个js文件中的任一个并编写相应高亮/去高亮的代码语句，都是可以实现DataTables搜索框查询结果高亮显示功能的，但是注意要在标签中设置高亮显示的背景颜色，否则没有高亮显示的效果。

四、总结

实现DataTables搜索框查询结果高亮显示的功能需要引入JavaScript文件，文中提供了3种这类文件，并说明了要配套编写的相关代码。希望能对大家的学习有所帮助，更多相关教程请访问 HTML视频教程，JavaScript视频教程，bootstrap视频教程！

以上是DataTables搜索框查询怎么实现结果高亮显示效果的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！