"Show All" won't redraw/refresh the table

Viewed 29

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.

2 Answers

You could use

oTable.columns().search("").draw()

to reset the search

One approach is to change the relevant <select> option:

<option value="">All</option>

And then remove the if logic which you no longer need:

 $('#categoryFilter').change(function () {
     var selectedValue = $(this).val();
     oTable.column(2).search(selectedValue).draw();
 })

Because the option's value is now an empty string this will unfilter your table.

Related