以下方法从第一列的内容构建一个选择列表（下拉列表）。
对于该列中的每个单元格，它将逗号分隔的项目拆分为单独的文本片段，然后为下拉列表创建一个排序的唯一列表。
当您通过从下拉列表中选择一个项目进行搜索时，它会检查所选项目是否包含在该列中每个单元格的文本中的任何位置。它为此使用了一个自定义的 DataTables 过滤器。
在我的例子中，我将下拉菜单放在了表格的页脚 - 您可以更改它。
表格如下所示：
这是下拉菜单：
当从下拉列表中选择一个项目时，您可以看到过滤效果：
此解决方案的代码如下 - 我已将其拆分为单独的部分/功能，以尝试使结构和方法更清晰：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" 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 , John, Nixon , </td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>John, Garrett , Winters , </td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton, Winters , Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric , Kelly , Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
// the DataTable object:
var table = $('#example').DataTable( {
select: false // or, whatever you need in here.
} );
// Setup - add a select list to first footer cell:
$('#example tfoot th').slice(0, 1).each( function () {
var dropdown = buildDropdown();
$(this).html( dropdown );
} );
// add a change event to the select list:
$('#mySelect').change(function() {
table.draw();
});
// create a custom search function for the select list,
// which finds if the selected item is contained in the cell:
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var selectedValue = $('#mySelect').val();
console.log(selectedValue);
if (data[0].includes(selectedValue)) {
return true;
} else {
return false;
}
}
);
function buildDropdown() {
var selectHtml;
// this will hold array of distinct values:
var items = [];
table.columns([0]).data().each(function (data, index) {
data.forEach(function (newItems, index) {
newItems.split(',').forEach(function (newItem, index) {
if ( newItem.trim() !== '' && items.indexOf(newItem) === -1) {
items.push(newItem.trim());
}
});
});
});
// sort and remove duplicates:
var uniqueSortedItems = [...new Set(items)].sort();
selectHtml = '<select id="mySelect"><option value=""></option>';
uniqueSortedItems.forEach(function(item) {
selectHtml = selectHtml + '<option value="' + item + '">' + item + '</option>';
});
selectHtml = selectHtml + '</select>';
return selectHtml;
}
} );
</script>
</body>
</html>
我认为这是您想要实现的目标 - 当然，您需要将其集成到您的特定解决方案中。
您还需要决定要对全局搜索功能（如果您正在使用它）做什么，因为它可能会干扰用于第一列的自定义搜索。