我有一个简单的 jQuery 数据表，其中包含 4 列，其中一列是下拉列表。
<!-- 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();
}
});
});
});
从上面的代码可以看出，您可以单独搜索每一列。我遇到的问题是仅搜索带有下拉列表的列中选定的选项。例如，当我搜索 Name 1 时，我应该只获取 New York 行，但我获取了所有行，因为 Name 1 仍然存在于所有下拉列表中，只是没有被选中。
任何人都知道如何过滤搜索功能，以便仅显示选定的项目作为结果？
https://jsfiddle.net/wbfsLx2x/2/ https://jsfiddle.net/wbfsLx2x/2/
Thanks!
检查这个jsfiddle https://jsfiddle.net/wbfsLx2x/6/。
您需要做的是覆盖默认搜索。
$.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;
}
);
希望这是您所需要的。
问候，
尤
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
