jQuery DataTable-搜索一列下拉列表
问题描述：
我有一个简单的jQuery数据表，其中包含4列，其中一列是下拉列表.
I have a simple jQuery Datatable that contains 4 columns and one of the columns is a list of dropdowns.
<!-- HTML CODE -->
<body>
<table id="vendorListing">
<tfoot>
<tr>
<th class="searchBox">Vendor Location</th>
<th class="searchBox">Currency</th>
<th class="searchBox">Vendor Type</th>
<th class="searchBox">Vendor</th>
</tr>
</tfoot>
<thead>
<tr>
<th>Vendor Location</th>
<th>Currency</th>
<th>Vendor Type</th>
<th>Vendor</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td>
<span id="vendorLocation_1" class="vendorLocation">New York</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">American</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">Steel</span>
</td>
<td>
<select id="vendorDropdown_1" class="vendorDropdown">
<option value="1" selected="selected">Vendor Name 1</option>
<option value="2">Vendor Name 2</option>
<option value="3">Vendor Name 3</option>
<option value="4">Vendor Name 4</option>
<option value="5">Vendor Name 5</option>
</select>
</td>
</tr>
<tr id="2">
<td>
<span id="vendorLocation_2" class="vendorLocation">Montreal</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">Canadian</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">Plastic</span>
</td>
<td>
<select id="vendorDropdown_2" class="vendorDropdown">
<option value="1">Vendor Name 1</option>
<option value="2" selected="selected">Vendor Name 2</option>
<option value="3">Vendor Name 3</option>
<option value="4">Vendor Name 4</option>
<option value="5">Vendor Name 5</option>
</select>
</td>
</tr>
<tr id="3">
<td>
<span id="vendorLocation_3" class="vendorLocation">Toronto</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">Canadian</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">Logistics</span>
</td>
<td>
<select id="vendorDropdown_3" class="vendorDropdown">
<option value="1">Vendor Name 1</option>
<option value="2">Vendor Name 2</option>
<option value="3">Vendor Name 3</option>
<option value="4">Vendor Name 4</option>
<option value="5" selected="selected">Vendor Name 5</option>
</select>
</td>
</tr>
<tr id="4">
<td>
<span id="vendorLocation_4" class="vendorLocation">Los Angeles</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">American</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">Lumber</span>
</td>
<td>
<select id="vendorDropdown_4" class="vendorDropdown">
<option value="1">Vendor Name 1</option>
<option value="2">Vendor Name 2</option>
<option value="3">Vendor Name 3</option>
<option value="4" selected="selected">Vendor Name 4</option>
<option value="5">Vendor Name 5</option>
</select>
</td>
</tr>
<tr id="5">
<td>
<span id="vendorLocation_5" class="vendorLocation">Seattle</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">American</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">Services</span>
</td>
<td>
<select id="vendorDropdown_5" class="vendorDropdown">
<option value="1">Vendor Name 1</option>
<option value="2">Vendor Name 2</option>
<option value="3">Vendor Name 3</option>
<option value="4" selected="selected">Vendor Name 4</option>
<option value="5">Vendor Name 5</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
<!-- CSS -->
#vendorListing_wrapper {
width: 800px;
}
#vendorListing_filter {
display: none;
}
.odd {
background: #dddddd !important;
}
.even {
background: #ffffff;
}
<!-- jQuery -->
var vendorTable = "";
$(function() {
$('#vendorListing tfoot th.searchBox').each(function() {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" id="search_' + title.replace(" ", "") + '" />');
});
vendorTable = $("#vendorListing").DataTable();
vendorTable.columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup change', function() {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
});
从上面的代码中可以看到，您可以分别搜索每一列.我遇到的问题是仅在带有下拉列表的列中搜索选定的选项.例如，当我搜索名称1时，我应该只获得纽约行，但是由于名称1仍然存在于所有下拉列表中，所以我得到了所有行，只是没有被选择.
As you can see from the above code you can search each column individually. The issue I'm having is searching for only the selected options in the column with the dropdowns. For example, when I search for Name 1 I should only get the New York row, but I get all the rows because Name 1 still exists in all the dropdowns, it just isn't selected.
有谁知道如何过滤搜索功能，因此仅出现选定的项目?
Any know how to filter the search feature so only the selected items come up as a result?
https://jsfiddle.net/wbfsLx2x/2/
谢谢！
答
选中此 jsfiddle . 您需要做的就是覆盖默认搜索.
Check this jsfiddle. What you need to do is override the default search.
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex, rowData, counter) {
var search_VendorLocationText = $('#search_VendorLocation').val();
var search_CurrencyText = $('#search_Currency').val();
var search_VendorTypeText = $('#search_VendorType').val();
var search_VendorText = $('#search_Vendor').val();
var textFound = true;
if(search_VendorLocationText.length){
var pattern = new RegExp(search_VendorLocationText, 'i');
if(pattern.test(data[0])){
textFound = true;
}else{
textFound = false;
}
}
if(search_CurrencyText.length){
var pattern = new RegExp(search_CurrencyText, 'i');
if(pattern.test(data[1])){
textFound = true;
}else{
textFound = false;
}
}
if(search_VendorTypeText.length){
var pattern = new RegExp(search_VendorTypeText, 'i');
if(pattern.test(data[2])){
textFound = true;
}else{
textFound = false;
}
}
if (search_VendorText.length) {
var pattern = new RegExp(search_VendorText, 'i');
if (pattern.test($(rowData[3]).children("option:selected").html())) {
textFound = true;
}else{
textFound = false;
}
}
return textFound;
}
);
希望这就是您所需要的.
Hope this is what you need.
关于， 优