DataTable单选框点击All无数据，求显示全部数据的解决方案

使用DataTable搭建表格并配置了包含All、Software Engineer、Accountant的单选筛选器，点击Software Engineer时筛选结果符合预期，但点击All选项时表格数据全部消失。

相关HTML结构 #

<div class="position-relative content">
    <div class="position-absolute w-100 row" style="z-index: 50;">
        <div class="col-6">
            <div class="filter-wrapper">
                <input type="radio" class="filter-checkbox" name="filter" value="all" checked="checked" />
                All
                <input type="radio" class="filter-checkbox" name="filter" value="Software Engineer" />
                Software Engineer
                <input type="radio" class="filter-checkbox" name="filter" value="Accountant" />
                Accountant
            </div>
        </div>
    </div>
</div>
<table id="example" class="table" style="z-index: 30;">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Status</th>
            <th>Hidden</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>
                <div class="badge status-badge badge-info">
                    Draft
                </div>
            </td>
            <td>DRF</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>
                <div class="badge status-badge badge-info">
                    Draft
                </div>
            </td>
            <td>DRF</td>
        </tr>
    </tbody>
</table>

原JavaScript代码 #

$(document).ready(function() {
    dataTable = $("#example").DataTable({
        columnDefs: [{
            targets: [7],
            visible: false
        }],
        "bInfo": false,
        "bPaginate": true,
        "bLengthChange": false,
        "buttons": [],
        "ordering": false,
        language: {
            paginate: {
                next: '<i class="px-2 py-1.5 rounded-md border-2 border-black fa-solid fa-chevron-right"></i>',
                previous: '<i class="px-2 py-1.5 rounded-md border-2 border-black fa-solid fa-chevron-left"></i>'
            }
        },
    });
    $(".filter-checkbox").on("change", function(e) {
        var searchTerms = [];
        $.each($(".filter-checkbox"), function(i, elem) {
            if ($(elem).prop("checked")) {
                searchTerms.push("^" + $(this).val() + "$");
            }
        });
        dataTable.column(1).search(searchTerms.join("|"), true, false, true).draw();
    });
});

问题原因 #

当前代码中，选中"All"选项时会生成正则表达式^all$去匹配Position列，但表格内没有Position值为all的行，因此筛选后无数据显示。正确逻辑应为：选中"All"时清空列筛选，恢复显示所有数据。

修复方案 #

修改单选框的change事件处理逻辑，判断选中的值是否为all：

• 若为all，调用search('')清空列筛选
• 若为其他选项，保留原有的精确正则匹配逻辑

修改后的JavaScript代码：

$(document).ready(function() {
    dataTable = $("#example").DataTable({
        columnDefs: [{
            targets: [7],
            visible: false
        }],
        "bInfo": false,
        "bPaginate": true,
        "bLengthChange": false,
        "buttons": [],
        "ordering": false,
        language: {
            paginate: {
                next: '<i class="px-2 py-1.5 rounded-md border-2 border-black fa-solid fa-chevron-right"></i>',
                previous: '<i class="px-2 py-1.5 rounded-md border-2 border-black fa-solid fa-chevron-left"></i>'
            }
        },
    });
    $(".filter-checkbox").on("change", function(e) {
        var selectedValue = $(this).val();
        if (selectedValue === "all") {
            // 清空筛选，显示全部数据
            dataTable.column(1).search('').draw();
        } else {
            // 对选中的职位进行精确匹配筛选
            dataTable.column(1).search("^" + selectedValue + "$", true, false, true).draw();
        }
    });
});

说明 #

• 单选框无需遍历所有选项，直接获取当前选中值即可
• search('')可清空指定列的筛选条件，恢复显示所有行
• 其他选项保留原精确匹配逻辑，确保筛选结果符合预期

内容的提问来源于stack exchange，提问作者Wandi