ColdFusion实现DataTables服务端列搜索时AJAX返回数据后表格不刷新

搜索后接口返回正确数据但表格不刷新，核心是DataTables版本兼容导致的返回数据格式不匹配，附带两个逻辑隐患：

• 你前端使用的是DataTables 1.10.12版本，后端返回的是1.9及更早版本要求的旧版服务端响应结构（字段为sEcho/iTotalRecords/iTotalDisplayRecords/aaData），1.10+版本默认读取的响应字段是draw/recordsTotal/recordsFiltered/data。你写的dataSrc回调直接把原始返回值透传，DataTables找不到对应字段，判定返回数据为空，自然不会触发表格重绘，只会在控制台打印你看到的返回日志。
• 列搜索事件绑定存在变量名冲突：table.columns().every的回调内重复声明了同名table变量，会导致搜索参数传递偶发异常。
• 后端手动拼接JSON字符串的写法存在转义风险，一旦字段内容包含未处理的引号、换行符，会直接触发JSON解析失败。

1. 前端代码修改 #

直接替换DataTables初始化及搜索绑定的逻辑即可，不需要改动后端结构就能解决当前不刷新的问题：

$(document).ready(function ()
{
    $('#tbl-contact thead th').each(function () {
        var title = $(this).text();
        $(this).html(title+' <input type="text" class="col-search-input" placeholder="Search ' + title + '" />');
    });
    
    var table = $('#tbl-contact').DataTable({
        "scrollX": true,
        "pagingType": "numbers",
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "../dataTableColumnFilterCFC.cfc?method=postRegmasterAjax10",
            "dataSrc": function (response) {
                console.log('接口返回数据：', response);
                // 旧版响应字段映射到1.10+版本识别的字段
                response.draw = response.sEcho;
                response.recordsTotal = response.iTotalRecords;
                response.recordsFiltered = response.iTotalDisplayRecords;
                // 返回实际行数据给DataTables渲染
                return response.aaData;
            },  
            error: function (xhr, error, thrown) {
                console.log('接口请求异常：', error, thrown);
            }                                      
        },                  
        order: [[2, 'asc']],
        columnDefs: [{
            targets: "_all",
            orderable: false
        }]
    });

    // 修复变量冲突，重命名内部列对象避免和外层table变量重名
    table.columns().every(function () {
        var currentCol = this;
        $('input', this.header()).on('keyup change clear', function () {
            if (currentCol.search() !== this.value) {
                currentCol.search(this.value).draw();
            }
        });
    });
});

补充：你当前引入的jQuery 2.2.0和DataTables 1.10.12版本可以正常运行，若后续遇到其他交互异常，优先对齐两个库的兼容版本即可。

2. 后端代码优化（可选，规避JSON格式风险） #

手动拼接JSON非常容易因为特殊字符转义不到位导致解析失败，ColdFusion自带序列化能力，建议把CFC中返回响应的逻辑替换为结构体序列化的写法，稳定性更高：

<!-- 删除原文件中手动拼接JSON字符串的<cfoutput>代码块，替换为以下逻辑 -->
<cfset response = structNew()>
<cfset response.sEcho = val(url.sEcho)>
<cfset response.iTotalRecords = qcount.total>
<cfset response.iTotalDisplayRecords = qFiltered.recordCount>
<cfset response.aaData = []>

<cfoutput query="qFiltered" startrow="#val(url.iDisplayStart+1)#" maxrows="#val(url.iDisplayLength)#">
    <cfset rowItem = []>
    <cfloop list="#listColumns#" index="thisColumn">
        <cfif thisColumn eq "version">
            <cfif version eq 0>
                <cfset arrayAppend(rowItem, "-")>
            <cfelse>
                <cfset arrayAppend(rowItem, replace(jsStringFormat(version),"\'","'","all"))>
            </cfif>
        <cfelse>
            <cfset arrayAppend(rowItem, replace(jsStringFormat(qFiltered[thisColumn][qFiltered.currentRow]),"\'","'","all"))>
        </cfif>
    </cfloop>
    <cfset arrayAppend(response.aaData, rowItem)>
</cfoutput>

<cfcontent reset="yes" type="application/json">
<cfoutput>#serializeJSON(response)#</cfoutput>

额外提示：你当前后端查询逻辑只实现了CONTACT列的过滤，其他列的搜索参数已经接收但没有写入WHERE条件，后续需要支持全列搜索时补上对应过滤规则即可。

修改完前端代码后刷新页面，在CONTACT列输入business13，接口返回后表格会自动重绘展示匹配结果，不会再出现控制台有数据但表格不更新的问题。

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