我正在使用一个dataTable,它有一个搜索框,用于列"年龄"从表中搜索数据及其工作正常,但我添加了一个" Drop Down"上面输入搜索框,现在我想要的是当我选择" ="如果列中的类型值匹配,搜索框应显示记录"年龄"如果我选择" < "如果列"搜索框应该显示记录年龄"项目的数量小于搜索框中输入的值,与select"相同> "或" Cantains"。
搜索框应根据所选项目工作。
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
// <!-- data table default jason -->
function filterGlobal() {
$('#example').DataTable().search(
$('#global_filter').val(),
$('#global_regex').prop('checked'),
$('#global_smart').prop('checked')
).draw();
}
function filterColumn(i) {
$('#example').DataTable().column(i).search(
$('#col' + i + '_filter').val(),
$('#col' + i + '_regex').prop('checked'),
$('#col' + i + '_smart').prop('checked')
).draw();
}
$(document).ready(function () {
//store the datatable object
globDataTable = $('#example').DataTable();
$('input.global_filter').on('keyup click', function () {
filterGlobal();
});
$('input.column_filter').on('keyup click', function () {
filterColumn($(this).parents('tr').attr('data-column'));
});
});
// <!-- data table default jason end -->
&#13;
<!-- search less than or greater than inputs -->
<table>
<tbody>
<tr>
<td>
Select to search:
<select id="selectAge">
<option value="1"> = </option>
<option value="1"> < </option>
<option value="1"> > </option>
<option value="1"> Contains </option>
</select>
</td>
</tr>
<tr id="filter_col4" data-column="3">
<td align="center" class="formcss" id="6">
input based on select :
<input type="text" class="column_filter" id="col3_filter">
</td>
</tr>
</tbody>
</table>
<!-- search less than or greater than inputs -->
<!-- table -->
<table id="example" class="display dataTableShow" border="1" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>50</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>80</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>20</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>10</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>60</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>30</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>10</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>20</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>30</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>40</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>50</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>60</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>70</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>80</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>90</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>100</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
&#13;