I have created a single HTML page with a static table. I am using the DataTables jQuery library to help make searching the table easier. I created a drop down menu to filter the table by the "Categories" column (column 2). The filter works for everything EXCEPT if I were to select the "All" option after I have filtered the table by selecting another option. I want the table to redraw itself but can't seem to get it to work. Here is my code (the actual table is 3x as long but I cut it short for this question):
HTML:
<section id="autocad-table">
<div class="table-container">
<div class="category-filter">
<label for="Category">What Type Of Code Do You Need?</label>
<select class="dropdown" name="Category" id="categoryFilter">
<option value="0">All</option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
</select>
</div>
<table id="commandsTable" class="stripe hover">
<thead>
<th>Command</th>
<th>Description</th>
<th>Category</th>
</thead>
<tbody id="commandsTableBody">
<tr>
<td>0_FILLET</td>
<td>Create a 0" radius fillet</td>
<td>Category 1</td>
</tr>
<tr>
<td>ALLFLAT</td>
<td>Flatten all objects in all blocks & layouts</td>
<td>Category 2</td>
</tr>
<tr>
<td>ANNO_TO_SQUEEZE</td>
<td>Convert an annotation to the SQUEEZE text style</td>
<td>Category 2</td>
</tr>
<tr>
<td>ARR</td>
<td>Creates an array of a selected object at a specified angle</td>
<td>Category 2, Category 1</td>
</tr>
<tr>
<td>ATC</td>
<td>Changes an arc into a circle</td>
<td>Category 3</td>
</tr>
<tr>
<td>BA</td>
<td>Bend Allowance</td>
<td>Category 3</td>
</tr>
<tr>
<td>BB</td>
<td>BOM Ball</td>
<td>Category 3</td>
</tr>
</tbody>
</table>
</div>
</section>
The Javascript:
$(document).ready( function () {
var oTable = $('#commandsTable').DataTable( {
"paging": false,
"ordering": false,
"info": false,
"searchHighlight": true,
});
$('#categoryFilter').change(function () {
var selectedValue = $(this).val();
if (selectedValue == '0') { //check if "All" is selected
oTable.search(selectedValue).draw();
} else {
oTable.column(2).search(selectedValue).draw();
}
})
} );
Again, the table will filter with both the text search field and the drop down. However, once I select "All" from the drop down, the table does not reset. What did I do wrong? Thank you for your help in advance.