我们已经使用链接中给出的代码实现了jQuery DataTables及其列级搜索功能
https://datatables.net/examples/api/multi_filter.html
我们已经使用jquery数据表的mrender在列上实现了下拉菜单。
我们无法使用列搜索来搜索具有下拉列表的列中的确切数据。我观察到搜索功能在下拉列表的所有选项值中进行搜索，而不是在“ selected”值中进行搜索。
我们可以避免在下拉菜单的所有选项中搜索吗？
另一个观察结果是，它也在其他相关的DOM元素内进行搜索，而不是在其上应用了搜索功能的列数据进行搜索。
DEMO
$(document).ready(
function() {
$('#example tfoot th').each(
function() {
var title = $('#example thead th').eq(
$(this).index()).text();
$(this).html(
'<input type="text" placeholder="Search '
+ title
+ '" style="width: 85%;"/> '
+ $("#selectOpt").html());
});
var table = $('#example').DataTable({
dom : 'RC<"clear">lfrtip',
stateSave : true
});
window.mtable = table;
$("#example tfoot input").on(
'keyup change',
function() {
var selOps = $(this.parentElement).find(
'select');
var regex = true;
var smart = false;
var val = this.value;
switch (selOps.val()) {
case "beginWith":
val = "^" + val;
break;
case "contains":
regex = false;
smart = true;
break;
case "doesNotContain":
val = "^((?!" + val + ").)*$";
break;
case "endsWith":
val = val + "$";
break;
case "equals":
val = "^" + val + "$";
break;
case "doesNotEqual":
val = "^(?!" + val + ")";
break;
}
var t1 = table.column($(this).parent().index()
+ ':visible');
var t2 = t1.search(val, regex, smart);
t2.draw();
});
});<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/colreorder/1.1.3/css/dataTables.colReorder.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/colvis/1.1.2/css/dataTables.colVis.min.css">
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/colreorder/1.1.3/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/colvis/1.1.2/js/dataTables.colVis.min.js"></script>
</head>
<body>
<div id="selectOpt">
<select style="width: 19px;">
<option value="beginWith">Begin's With</option>
<option value="contains" selected>Contains</option>
<option value="doesNotContain">Doesn't Contains</option>
<option value="endsWith">Ends With</option>
<option value="equals">Equals</option>
<option value="doesNotEqual">Doesn't Equals</option>
</select>
</div>
<a name="Example"></a>
<h2 data-anchor="Example">Example</h2>
<input type="button" class="btn btn-primary" value="Search" id="searchIBtn"/>
<p>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Vehicle</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Select</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Vehicle</th>
</tr>
</tfoot>
<tbody>
<tr>
<td><input type="checkbox" class="chkBox"></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>
<select>
<option selected value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" class="chkBox"></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
<td>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option selected value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
</tr>
</tbody>
</table>
</p>
</body>