DataTables表格按下拉框选中项过滤失效问题求助

你的问题出在DataTables默认会把单元格里的所有HTML内容（包括下拉框里的所有选项文本）作为搜索依据，所以每个Action列的单元格里都包含了Plan、Do、Check、Act所有文本，搜"plan"时所有行都能匹配到，搜其他内容自然找不到匹配项。

要实现只按下拉框的选中文本过滤，需要自定义DataTables的列搜索逻辑，让它只读取每行select的选中值。另外你的代码里还存在表格ID不匹配的问题（HTML里表格ID是myTable，但JS里用了myDataTable），这也得修正。

以下是完整的修正代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Table with Filters</title>
    <script src="javaScript/jquery-3.1.1.js"></script>
    <script src="javaScript/jquery.tablesorter.js"></script>
    <script src="javaScript/jquery-ui.min.js"></script>
    <script src="javaScript/jquery-core-validate.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.css" />
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.js"></script>
</head>
<body>

    <table id="myTable" class="display">
        <thead>
            <tr>
                <th>Name</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Chris</td>
                <td>
                    <select>
                        <option value="0">Plan</option>
                        <option value="1">Do</option>
                        <option value="2">Check</option>
                        <option value="3">Act</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Anna</td>
                <td>
                    <select>
                        <option value="0">Plan</option>
                        <option value="1">Do</option>
                        <option value="2">Check</option>
                        <option value="3">Act</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
    
<script>
$(document).ready(function () {
    // 修正表格ID匹配问题，同时配置自定义搜索逻辑
    var table = $('#myTable').DataTable({
        orderCellsTop: true,
        fixedHeader: true,
        columnDefs: [
            {
                targets: 1, // 针对第2列（Action列，索引从0开始）
                render: function(data, type, row) {
                    // 当DataTables进行搜索/排序时，返回下拉框的选中文本
                    if (type === 'filter' || type === 'sort') {
                        return $(data).find('option:selected').text();
                    }
                    // 正常显示时返回原始HTML
                    return data;
                }
            }
        ],
        initComplete: function () {
            var api = this.api();
            // 克隆表头添加筛选栏
            api.table().header().cloneNode(true)
                .classList.add('filters')
                .insertBefore(api.table().header());

            // 为每列添加筛选输入框
            api.columns().eq(0).each(function(colIdx) {
                var cell = $('.filters th').eq(colIdx);
                var title = $(cell).text();
                $(cell).html('<input type="text" placeholder="' + title + '" />');

                // 绑定筛选事件
                $('input', cell)
                    .off('keyup change')
                    .on('change keyup', function(e) {
                        var cursorPosition = this.selectionStart;
                        api.column(colIdx)
                            .search(this.value)
                            .draw();
                        // 保持光标位置
                        $(this).focus()[0].setSelectionRange(cursorPosition, cursorPosition);
                    });
            });
        }
    });

    // 监听下拉框变化，触发表格重新搜索，确保选中值变化后筛选结果更新
    $('#myTable tbody select').on('change', function() {
        table.draw();
    });
});
</script>

</body>
</html>

关键修改说明 #

• 修正表格ID：把JS里的myDataTable统一改成myTable，和HTML里的表格ID匹配，避免初始化失败。
• 自定义列渲染逻辑：通过columnDefs为Action列设置render函数，当DataTables进行筛选或排序时，只返回下拉框的选中文本，而不是整个单元格的HTML内容。
• 监听下拉框变化：当下拉框选中值改变时，调用table.draw()触发表格重新渲染，确保筛选结果实时更新。
• 简化筛选逻辑：去掉了不必要的正则表达式处理，直接使用输入值进行搜索，逻辑更简洁高效。

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