How to achieve result highlighting effect for DataTables search box query

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.

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.

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 examplethere is one less statement to set the style, so the highlighting functioncannot be realized. http://www.datatables.club/blog/2014/10/22/search-result-highlighting.html

---

##1. DataTables related code

1. Code skeleton

Need to be introduced to use DataTables table jQuery; the example uses the online DataTables CDN.

2. Create a table

Create a

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

3. Configure table as DataTable

tagto DataTable Make relevant settings. No other styles are set here, only the data source of the table is configured. DataTables tables support multiple data sources, JavaScript object arrays, data returned by ajax, json format data, etc. Here, the data in the Excel table is stored in the "Nanjing Travel Notes.js" file in the form of an object array (each element in the array is an object, that is, a piece of travel record information), and then introduced in src in the HTML page where DataTables is located (" There is only one JavaScript object array in the Nanjing Attractions.js" file). To configure the data source in this way, you need to set the columns attribute in the DataTable constructor. Note that this should correspond to the Table header information. For other methods of DataTables style setting and data source configuration, please check the relevant content in the official documentation: https://datatables.net/examples/index.

element in the tag and set Table header information.

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

　

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

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

这种方法的具体步骤为：

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视频教程！

The above is the detailed content of How to achieve result highlighting effect for DataTables search box query. For more information, please follow other related articles on the PHP Chinese website!