我有一个数据表，每一行都应包含一个带有多个选项的选择项，这些只是示例。 表格顶部是默认搜索栏，我想按所选项目的文本过滤行。 目前，当我搜索“计划”时，无论选择什么选项，都会显示每一行。 当我输入任何内容时，尽管有“计划”、“执行”、“检查”、“行动”，所有行都会像应该的那样消失，我想它不仅仅搜索选定的值。
我有这样的示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Table with Filters</title>
<script src="javaScript/jquery-3.1.1.js"></script>
<script src="javaScript/jquery.tablesorter.js"></script>
<script src="javaScript/jquery-ui.min.js"></script>
<script src="javaScript/jquery-core-validate.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.css" />
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.js"></script>
</head>
<body>
<table id="myTable" class="display">
<thead>
<tr>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chris</td>
<td>
<select>
<option value="0">Plan</option>
<option value="1">Do</option>
<option value="2">Check</option>
<option value="3">Act</option>
</select>
</td>
</tr>
<tr>
<td>Anna</td>
<td>
<select>
<option value="0">Plan</option>
<option value="1">Do</option>
<option value="2">Check</option>
<option value="3">Act</option>
</select>
</td>
</tr>
</tbody>
</table>
<script>
let table = new DataTable('#myTable');
$(document).ready(function () {
// Setup - add a text input to each footer cell
$('#myDataTable thead tr')
.clone(true)
.addClass('filters')
.appendTo('#myDataTable thead');
var table = $('#myDataTable').DataTable({
orderCellsTop: true,
fixedHeader: true,
initComplete: function () {
var api = this.api();
// For each column
api
.columns()
.eq(0)
.each(function (colIdx) {
// Set the header cell to contain the input element
var cell = $('.filters th').eq(
$(api.column(colIdx).header()).index()
);
var title = $(cell).text();
$(cell).html('<input type="text" placeholder="' + title + '" />');
// On every keypress in this input
$(
'input',
$('.filters th').eq($(api.column(colIdx).header()).index())
)
.off('keyup change')
.on('change', function (e) {
// Get the search value
$(this).attr('title', $(this).val());
var regexr = '({search})'; //$(this).parents('th').find('select').val();
var cursorPosition = this.selectionStart;
// Search the column for that value
api
.column(colIdx)
.search(
this.value != ''
? regexr.replace('{search}', '(((' + this.value + ')))')
: '',
this.value != '',
this.value == ''
)
.draw();
})
.on('keyup', function (e) {
e.stopPropagation();
$(this).trigger('change');
$(this)
.focus()[0]
.setSelectionRange(cursorPosition, cursorPosition);
});
});
},
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Table with Filters</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.css" />
</head>
<body>
<table id="myTable" class="display">
<thead>
<tr>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chris</td>
<td>
<select class="filter-select">
<option value="0">Plan</option>
<option value="1">Do</option>
<option value="2">Check</option>
<option value="3">Act</option>
</select>
</td>
</tr>
<tr>
<td>Anna</td>
<td>
<select class="filter-select">
<option value="0">Plan</option>
<option value="1">Do</option>
<option value="2">Check</option>
<option value="3">Act</option>
</select>
</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
var table = $('#myTable').DataTable({
orderCellsTop: true,
fixedHeader: true
});
// Add a change event listener to the select elements with class 'filter-select'
$('.filter-select').on('change', function () {
// Get the selected value
var selectedValue = $(this).val();
// Filter the table based on the selected value in the second column (index 1)
table.column(1).search(selectedValue).draw();
});
});
</script>
</body>
</html>
在此更正后的代码中：
filter-selectselect