📅 最后修改于: 2023-12-03 15:23:50.934000 🧑 作者: Mango
DataTables 是一个强大的 JavaScript 表格插件，可以轻松地对表格进行排序、筛选、分页等操作。在实际开发中，经常需要对表格中的数据进行搜索过滤，通常是针对某列数据的搜索。下面就来介绍如何使用 DataTables 插件来实现特定于列的搜索过滤器。
首先，我们需要在页面中引入 DataTables 插件，并进行初始化：
$(document).ready(function() {
$('#table_id').DataTable({
// 在这里配置 DataTables 的参数
});
});
接下来，我们需要在表格上方添加搜索框，用于输入搜索关键词。在 HTML 中添加一个文本框和一个按钮：
<div>
<label for="search_input">Search:</label>
<input type="text" id="search_input" />
<button id="search_button">Search</button>
</div>
当用户点击搜索按钮时，应该触发搜索操作。我们可以给搜索按钮绑定一个点击事件，然后在事件处理函数中实现搜索功能：
$(document).ready(function() {
var dataTable = $('#table_id').DataTable({
// 在这里配置 DataTables 的参数
});
$('#search_button').on('click', function() {
var keyword = $('#search_input').val();
dataTable.columns().every(function() {
this.search(keyword).draw();
});
});
});
上面的代码中，我们先获取了文本框中输入的关键词，并使用 DataTables 的 columns().every() 方法迭代每一列数据。对于每一列，我们调用 search() 方法来设置搜索关键词，然后调用 draw() 方法重新绘制表格。
上面的代码实现了在所有列中搜索关键词的功能，下面我们来实现特定列搜索的功能。假设我们要在第二列（索引从 0 开始）中进行搜索，可以这样实现：
$(document).ready(function() {
var dataTable = $('#table_id').DataTable({
// 在这里配置 DataTables 的参数
});
$('#search_button').on('click', function() {
var keyword = $('#search_input').val();
dataTable.column(1).search(keyword).draw();
});
});
在上面的代码中，我们使用 column() 方法选择了第二列数据，并使用 search() 方法设置搜索关键词，之后调用了 draw() 方法重新绘制表格。
到这里，我们已经实现了特定列搜索的功能。不难看出，利用 DataTables 实现搜索过滤器并不难，只需要在初始化 DataTables 之后添加搜索框和搜索事件即可。特定列搜索的实现方法也很简单，只需要在搜索事件处理函数中使用 column() 方法选择需要搜索的列即可。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataTable Search Filter</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.23/datatables.min.css"/>
</head>
<body>
<div>
<label for="search_input">Search:</label>
<input type="text" id="search_input" />
<button id="search_button">Search</button>
</div>
<table id="table_id">
<!-- 表格内容 -->
</table>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.23/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var dataTable = $('#table_id').DataTable({
// 在这里配置 DataTables 的参数
});
$('#search_button').on('click', function() {
var keyword = $('#search_input').val();
dataTable.column(1).search(keyword).draw();
});
});
</script>
</body>
</html>