2个自定义组合框，在数据表中过滤结果，获得2个组合框来过滤结果- JavaScript, jQuery

我的任务是创建一个带有两个自定义组合框的Datatable页面。不幸的是，这没有灵活性，它们必须自定义，但必须对应于各自的列。我有麻烦得到这两个组合框过滤下面的结果。我知道我的代码是错的，但这就是我现在的处境。为了清楚起见，我希望能够同时使用两个组合框来过滤结果(例如:只显示伦敦的项目经理)。

<select id="dropdown1">
<option value="">Select Position</option>
<option value="Investigator">Investigator</option>
<option value="Project Manager">Project Manager</option>
<option value="Data Analyst">Data Analyst</option>
<option value="Data Manager">Data Manager</option>
<option value="Other">Other</option>
</select>
<select id="dropdown2">
<option value="">Select Office</option>
<option value="London">London</option>
<option value="San Francisco">San Francisco</option>
</select>
<br>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>Investigator</td>
<td>Edinburgh</td>
<td>61</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Investigator</td>
<td>Tokyo</td>
<td>63</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Project Manager, Data Analyst</td>
<td>San Francisco</td>
<td>66</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Data Manager</td>
<td>London</td>
<td>22</td>
</tr>
<tr>
<td>Jim Kelly</td>
<td>Investigator, other</td>
<td>London</td>
<td>22</td>
</tr>
</tbody>
</table>

JavaScript


$(document).ready(function() {
$('#example').DataTable( {
dom: 'Qlfrtip'});
$('#dropdown1').on('change', function () {
table.columns(1).search( this.value ).draw();
} );
$('#dropdown2').on('change', function () {
table.columns(2).search( this.value ).draw();
} );
});

问题是您在jQuery事件中调用table.columns().search( this.value ).draw();，但您从未初始化table变量。

要解决这个问题，将$(document).ready(function() {中的$('#example').DataTable更改为var table = $('#example').DataTable

请看下面的工作示例:

$(document).ready(function() { var table = $('#example').DataTable( { dom: 'Qlfrtip' }); $('#dropdown1').on('change', function () { table.columns(1).search( this.value ).draw(); } ); $('#dropdown2').on('change', function () { table.columns(2).search( this.value ).draw(); } ); });
<head>  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/autofill/2.3.7/css/autoFill.dataTables.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.1/css/dataTables.dateTime.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/keytable/2.6.4/css/keyTable.dataTables.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.1.3/css/rowGroup.dataTables.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css"/>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/autofill/2.3.7/js/dataTables.autoFill.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/datetime/1.1.1/js/dataTables.dateTime.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/keytable/2.6.4/js/dataTables.keyTable.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.1.3/js/dataTables.rowGroup.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script> </head> <select id="dropdown1"> <option value="">Select Position</option> <option value="Investigator">Investigator</option> <option value="Project Manager">Project Manager</option> <option value="Data Analyst">Data Analyst</option> <option value="Data Manager">Data Manager</option> <option value="Other">Other</option> </select> <select id="dropdown2"> <option value="">Select Office</option> <option value="London">London</option> <option value="San Francisco">San Francisco</option> </select> <br> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>Investigator</td> <td>Edinburgh</td> <td>61</td> </tr> <tr> <td>Garrett Winters</td> <td>Investigator</td> <td>Tokyo</td> <td>63</td> </tr> <tr> <td>Ashton Cox</td> <td>Project Manager, Data Analyst</td> <td>San Francisco</td> <td>66</td> </tr> <tr> <td>Cedric Kelly</td> <td>Data Manager</td> <td>London</td> <td>22</td> </tr> <tr> <td>Jim Kelly</td> <td>Investigator, other</td> <td>London</td> <td>22</td> </tr> </tbody> </table>

相关内容

最新更新

热门标签：