I am tasked with creating a Datatable page with two customized combo boxes. Unfortunately, there isn't flexibility with this and they have to be customized, yet must correspond to their respective columns. I am having trouble getting these two combo boxes to filter results below. I know my code is wrong, but it's where I'm at right now. Just for clarity, I want the ability to use both combo boxes simultaneously to filter results (example: show only project managers in London).
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" 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();
} );
});
CodePudding user response：
The issue is that you are calling table.columns().search( this.value ).draw(); within your jQuery events, but you never initialized the table variable.
To fix this, change $('#example').DataTable inside of your $(document).ready(function() { to var table = $('#example').DataTable
See this working example:
$(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" 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>