Bootstrap升级后DataTables搜索功能异常问题求助

核心问题原因 #

1. DataTables版本冲突：同时引入了jquery.dataTables.js(1.13.8)和jquery.dataTables.min.js(1.10.2)两个版本，新旧版本的API和内部逻辑存在差异，直接导致功能异常。
2. 表单元素搜索不兼容：DataTables默认仅抓取单元格的HTML文本内容，而你的表格单元格内是input/select等表单元素，默认搜索逻辑无法识别这些元素的value值，导致部分内容搜不到。

分步解决方案 #

1. 清理版本冲突的脚本 #

删除旧版本的jquery.dataTables.min.js(1.10.2)，仅保留以下匹配版本的资源：

• jquery-3.6.0.min.js
• bootstrap.bundle.min.js(4.6.2)
• jquery.dataTables.js(1.13.8)
• dataTables.bootstrap4.js及对应CSS

2. 修正表头HTML结构 #

将<thead>内的<td>替换为<th>（DataTables要求表头使用<th>标签，否则可能影响功能识别）：

<thead>
    <tr>
        <th>Name</th>
        <th>Beschreibung wg. Analyse</th>
        <th>Pflicht?</th>
        <th>Format / Bedingung / next / Ziel</th>
    </tr>
</thead>

3. 自定义DataTables搜索逻辑 #

修改JavaScript配置，通过columns.render指定每个列的搜索内容（抓取表单元素的实际值），同时监听表单元素变化以更新DataTables缓存：

if ($(this).attr('data-cells') == '4' && $(this).attr('id') == 'fieldlist') {
    param = { 
        "aoColumns": [
            { 
                "render": function(data, type, row) {
                    // 第一列：提取input的value值
                    return $(data).find('input').val();
                }
            },
            { 
                "render": function(data, type, row) {
                    // 第二列：合并隐藏span文本与两个input的value
                    const hiddenText = $(data).find('span').text();
                    const numInputVal = $(data).find('input[name^="feldnameNummer_"]').val();
                    const descInputVal = $(data).find('input[name^="fieldname2_"]').val();
                    return `${hiddenText} ${numInputVal} ${descInputVal}`;
                }
            },
            { 
                "render": function(data, type, row) {
                    // 第三列：提取label的文本内容
                    return $(data).find('label').text().trim();
                }
            },
            { 
                "render": function(data, type, row) {
                    // 第四列：合并只读input与select的value
                    const typeInputVal = $(data).find('input[name^="typ_"]').val();
                    const selectVals = $(data).find('select').map(() => $(this).val()).get().join(' ');
                    return `${typeInputVal} ${selectVals}`;
                }
            }
        ], 
        "sPaginationType": "full_numbers", 
        "bAutoWidth": false, 
        "bProcessing": true,
        "initComplete": function(settings) {
            const table = $(this).DataTable();
            // 监听表单元素变化，实时更新表格数据缓存
            $(this).on('change keyup', 'input, select', function() {
                table.row($(this).closest('tr')).invalidate();
            });
        }
    };
} else if ($(this).attr('data-cells') == '4') {
    param = { 
        "aaSorting": [[0, "desc"]], 
        "aoColumns": [{ "sType": "date-eu" }, null, null, null], 
        "sPaginationType": "full_numbers" 
    };
}

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