dataTable前端实现搜索
时间: 2023-07-07 16:16:44 浏览: 76
要在前端实现dataTable的搜索功能,首先需要引入jQuery和dataTable插件。然后,可以按照以下步骤进行操作:
1. 在HTML中添加一个input元素,用于接收用户输入的搜索关键词。
2. 在JavaScript中初始化dataTable,并设置搜索框为dataTable的搜索框,代码如下:
```
$(document).ready(function() {
$('#myTable').DataTable();
// 设置搜索框为dataTable的搜索框
$('#searchInput').keyup(function(){
$('#myTable').DataTable().search($(this).val()).draw() ;
})
});
```
3. 在dataTable中设置需要搜索的列,代码如下:
```
$(document).ready(function() {
$('#myTable').DataTable({
"searching": true, // 开启搜索功能
"columns": [
null, // 第一列
null, // 第二列
{ "searchable": false } // 第三列不可搜索
]
});
// 设置搜索框为dataTable的搜索框
$('#searchInput').keyup(function(){
$('#myTable').DataTable().search($(this).val()).draw() ;
})
});
```
这样就可以在前端实现dataTable的搜索功能了。用户在搜索框中输入关键词,dataTable会自动搜索包含该关键词的行,并将结果显示出来。
相关推荐
![application/msword](https://img-home.csdnimg.cn/images/20210720083327.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)