0
DataTablesを適用するHTMLテーブルがあります。これは、ユーザーが組み込み検索フィルタを使用して検索できるようにするためですが、 1つの特定の列のみでデータをフィルタリングし、お互いに競合しないドロップダウンメニューです。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のドロップダウンに集中しています。
.search（）APIを使用するよりも、onChange jQuery呼び出しからの選択ドロップダウンでデータをフィルタ処理するより良い方法はありますか？