jquery的dataTable插件，如何搜索两个关键字，两个关键字关系是or
牵马的蜘蛛
收藏于2024-12-05
在使用 jQuery DataTables 插件时，如果你希望实现搜索两个关键字，并且这两个关键字之间的关系是 "OR"（即只要满足其中一个关键字就匹配），你可以通过自定义搜索功能来实现这一点。
DataTables 插件提供了一个 $.fn.dataTable.ext.search 数组，你可以向其中添加自定义的搜索函数。以下是一个示例代码，展示了如何实现这一功能：
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataTables OR Search</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
<script>
$(document).ready(function() {
var table = $('#example').DataTable();
// Custom search function
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var keywords = ['keyword1', 'keyword2']; // Replace with your keywords
var searchString = data.join(' ').toLowerCase();
var match = false;
for (var i = 0; i < keywords.length; i++) {
if (searchString.indexOf(keywords[i].toLowerCase()) !== -1) {
match = true;
break;
}
}
return match;
}
);
// To redraw the table and apply the new search
table.draw();
});
</script>
</body>
</html>
在这个示例中：
- 我们首先引入 jQuery 和 DataTables 插件。
-
创建一个包含一些示例数据的表格，并使用
$('#example').DataTable()初始化 DataTables。 -
使用
$.fn.dataTable.ext.search.push方法添加自定义搜索函数。这个自定义搜索函数会检查每一行的数据是否包含任意一个关键字（在这个例子中是'keyword1'或'keyword2'）。 -
调用
table.draw()方法来重新绘制表格并应用新的搜索条件。
你可以根据需要修改 keywords 数组中的关键字，以符合你的搜索需求。
特别重申：本篇文档资料为 “好网角收藏夹” 注册用户(收藏家)上传共享，仅供参考之用，请谨慎辨别，不代表本站任何观点。
好网角收藏夹为网友提供资料整理云存储服务，仅提供信息存储共享平台。
信息删除举报或发邮件到：dongye2016@qq.com
好网角收藏夹为网友提供资料整理云存储服务，仅提供信息存储共享平台。
信息删除举报或发邮件到：dongye2016@qq.com
类似文章
最新转藏文章
文档下载
下载连接中...
返回
TOP