2 个自定义组合框，在 DataTables 中过滤结果，获取 2 个组合框来过滤结果的问题 - JavaScript、jQuery
Posted
技术标签:
【中文标题】2 个自定义组合框，在 DataTables 中过滤结果，获取 2 个组合框来过滤结果的问题 - JavaScript、jQuery【英文标题】：2 custom combo boxes, filter results in DataTables, issue getting 2 combo boxes to filter results - JavaScript, jQuery 【发布时间】：2021-11-22 15:00:39 【问题描述】：我的任务是创建一个带有两个自定义组合框的数据表页面。不幸的是，这没有灵活性，它们必须定制，但必须对应于它们各自的列。我无法让这两个组合框过滤下面的结果。我知道我的代码是错误的，但这是我现在所处的位置。为清楚起见，我希望能够同时使用两个组合框来过滤结果（例如：仅显示伦敦的项目经理）。
HTML
<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" >
<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();
);
);
【问题讨论】：
【参考方案1】：问题是您在 jQuery 事件中调用 table.columns().search( this.value ).draw();，但您从未初始化表变量。
要解决此问题，请将 $(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>
<!--Styles-->
<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"/>
<!--Scripts-->
<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" >
<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>【讨论】：
以上是关于2 个自定义组合框，在 DataTables 中过滤结果，获取 2 个组合框来过滤结果的问题 - JavaScript、jQuery的主要内容，如果未能解决你的问题，请参考以下文章
如何在一个 tableView 上提供超过 2 个自定义单元格以进行聊天