我有一个HTML表，我正在应用DataTables，我希望用户能够使用内置的搜索过滤器进行搜索，还有一个只在一个特定列中过滤数据的下拉列表彼此冲突。
我现在所拥有的（可能不是最好的方法）使用.search（）API，当我使用过滤器时，它可以工作，但当我输入内置搜索的任何内容时，它会覆盖过滤
HTML：
<table id="searchResults" class="table table-striped table-hover table-condensed" width="700">
<thead>
<tr>
<th class="td-checkbox"></th>
<th class="td-currentlyUsed"></th>
<th class="td-osfNumber"></th>
<th class="td-title">Title</th>
<th class="td-titleSort">Title Sort</th>
<th class="td-popularity">Popularity</th>
<th class="td-contributor">Contributor</th>
<th class="td-format">Format</th>
<th class="td-worldSellable"></th>
<th class="td-releaseDate">Release Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td-checkbox"><input type="checkbox" name="itemIds" value="true"></td>
<td class="td-currentlyUsed"><i class="fa fa-check-circle" aria-hidden="true" data-toggle="tooltip" title="Currently Used"></i></td>
<td class="td-osfNumber"></td>
<td class="td-title">
<a href="#" data-toggle="modal" data-target="#previewModal" data-title="Item Name" data-contrib="Item Contributor" class="previewLink">
<i class="fa fa-search" data-toggle="tooltip" title="Preview"></i>
</a>
<span class="item-name">Item Name</span>
</td>
<td class="td-titleSort">Item Title</td>
<td class="td-popularity">01</td>
<td class="td-contributor">Item Contributor</td>
<td class="td-format">Format Abbreviation</td>
<td class="td-worldSellable">
<i class="fa fa-globe fa-icon fa-true" aria-hidden="true" data-toggle="tooltip" title="World Sellable"></i><span class="span-worldSellable">worldwide-sellable</span>
</td>
<td class="td-releaseDate"><span class="item-date">Date Added</span></td>
</tr>
<tr>
<td class="td-checkbox"><input type="checkbox" name="itemIds" value="true"></td>
<td class="td-currentlyUsed"><i class="fa fa-check-circle" aria-hidden="true" data-toggle="tooltip" title="Currently Used"></i></td>
<td class="td-osfNumber"></td>
<td class="td-title">
<a href="#" data-toggle="modal" data-target="#previewModal" data-title="Item Name" data-contrib="Item Contributor" class="previewLink">
<i class="fa fa-search" data-toggle="tooltip" title="Preview"></i>
</a>
<span class="item-name">Item Name</span>
</td>
<td class="td-titleSort">Item Title</td>
<td class="td-popularity">02</td>
<td class="td-contributor">Item Contributor</td>
<td class="td-format">Format Abbreviation</td>
<td class="td-worldSellable"></td>
<td class="td-releaseDate"><span class="item-date">Date Added</span></td>
</tr>
<tr>
<td class="td-checkbox"><input type="checkbox" name="itemIds" value="true"></td>
<td class="td-currentlyUsed"><i class="fa fa-check-circle" aria-hidden="true" data-toggle="tooltip" title="Currently Used"></i></td>
<td class="td-osfNumber"></td>
<td class="td-title">
<a href="#" data-toggle="modal" data-target="#previewModal" data-title="Item Name" data-contrib="Item Contributor" class="previewLink">
<i class="fa fa-search" data-toggle="tooltip" title="Preview"></i>
</a>
<span class="item-name">Item Name</span>
</td>
<td class="td-titleSort">Item Title</td>
<td class="td-popularity">03</td>
<td class="td-contributor">Item Contributor</td>
<td class="td-format">Format Abbreviation</td>
<td class="td-worldSellable">
<i class="fa fa-globe fa-icon fa-true" aria-hidden="true" data-toggle="tooltip" title="World Sellable"></i><span class="span-worldSellable">worldwide-sellable</span>
</td>
<td class="td-releaseDate"><span class="item-date">Date Added</span></td>
</tr>
<tr>
<td class="td-checkbox"><input type="checkbox" name="itemIds" value="true"></td>
<td class="td-currentlyUsed"><i class="fa fa-check-circle" aria-hidden="true" data-toggle="tooltip" title="Currently Used"></i></td>
<td class="td-osfNumber"></td>
<td class="td-title">
<a href="#" data-toggle="modal" data-target="#previewModal" data-title="Item Name" data-contrib="Item Contributor" class="previewLink">
<i class="fa fa-search" data-toggle="tooltip" title="Preview"></i>
</a>
<span class="item-name">Item Name</span>
</td>
<td class="td-titleSort">Item Title</td>
<td class="td-popularity">04</td>
<td class="td-contributor">Item Contributor</td>
<td class="td-format">Format Abbreviation</td>
<td class="td-worldSellable"></td>
<td class="td-releaseDate"><span class="item-date">Date Added</span></td>
</tr>
</tbody>
</table>
JS：
$(document).ready( function () {
var searchResults = $("#searchResults").DataTable({
"pageLength": 15,
"pagingType": "full_numbers",
"bFilter": true,
"dom": '<"top"fp<"clear">>rt<"bottom"ip<"clear">>',
"oLanguage": {
"oPaginate": {
"sFirst": "<<", // This is the link to the first page
"sPrevious": "<", // This is the link to the previous page
"sNext": ">", // This is the link to the next page
"sLast": ">>", // This is the link to the last page
}
},
"columnDefs": [{
"targets": [0, 1, 8],
"orderable": false
},
{
"targets": [2, 4, 5],
"visible": false
}],
"order": [[2, "asc"]],
"initComplete": function(settings, json) {
$(".dataTables_wrapper .top").addClass("row");
$(".dataTables_wrapper .bottom").addClass("row");
$(".dataTables_wrapper .top .dataTables_filter").addClass("col-xs-4");
$(".dataTables_wrapper .top .dataTables_paginate").addClass("col-xs-12");
$(".dataTables_wrapper .top .dataTables_filter input").addClass("form-control input-sm");
$(".dataTables_wrapper .bottom .dataTables_info").addClass("col-xs-6");
$(".dataTables_wrapper .bottom .dataTables_paginate").addClass("col-xs-6");
var htmlWF = "<div id='worldwide_filter' class='worldwide_filter col-xs-4'><div class='form-group'><label>Filter By: </label><select id='select_worldwide' name='select_worldwide' class='form-control input-sm'><option value=''>ALL</option><option value='worldwide-sellable'>WORLDWIDE SELLABLE</option></select></div></div>";
var htmlSB = "<div id='dataTables_sortby' class='dataTables_sortby col-xs-4'><div class='form-group'><label>Sort By: </label><select id='select_sortby' name='select_sortby' class='form-control input-sm'><option value='4'>TITLE</option><option value='9'>RELEASE DATE</option><option value='5'>POPULARITY</option><option value='2'>OSF NUMBER</option></select></div></div>";
$(htmlWF).insertBefore( "#searchResults_wrapper #searchResults_filter" );
$(htmlSB).insertAfter( "#searchResults_wrapper #worldwide_filter" );
}
});
$( "#select_worldwide" ).change(function() {
searchResults.search( this.value ).draw();
});
});
该表按指示呈现。我省略了与此问题无关的元素函数。我只专注于内置搜索以及相互覆盖的 #select_worldwide 下拉列表。
使用onChange jQuery调用中的select下拉列表比使用.search（）API更好的方法来过滤掉数据吗？
答案 0 :(得分：0)
我需要更换
searchResults.search( this.value ).draw();
与
searchResults.columns(8).search( this.value ).draw();
我正在指定保存全球数据的列，添加后，我可以串联使用搜索过滤器，并且不会与另一个冲突。