javascript - "Show All"不会重绘/刷新表格

Question

我创建了一个带有静态表的 HTML 页面。我正在使用 DataTables jQuery 库来帮助更轻松地搜索表。我创建了一个下拉菜单，通过“类别”列(第 2 列)过滤表格。该过滤器适用于所有内容，除非我在通过选择另一个选项过滤表格后选择“全部”选项。我希望表格能够自行重绘，但似乎无法让它工作。这是我的代码(实际的表格是 3 倍长，但我针对这个问题将其缩短):

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>

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();
     }
 })

} );

同样，表格将使用文本搜索字段和下拉列表进行过滤。但是，一旦我从下拉列表中选择“全部”，该表就不会重置。我做错了什么？感谢您提前提供的帮助。

Answer 1

一种方法是更改​​相关的 <select>选项:

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

然后删除if您不再需要的逻辑:

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

因为选项的值现在是空字符串，这将取消过滤您的表格。