jQuery Datatable封装通用Ajax请求后dataSrc回调不执行如何解决

问题根因 #

你当前的写法存在3个核心错误：

• Datatables的ajax配置项要求接收符合规则的配置对象或是自定义请求函数，你的ajaxForDataTable方法没有返回值，将它的执行结果赋值给ajax字段等同于传入undefined，Datatables不会将你在函数内主动发起的$.ajax和自身的渲染逻辑绑定。
• dataSrc是Datatables的专属配置属性，不属于jQuery原生$.ajax的支持参数，你将它写入$.ajax的配置中会被直接忽略，自然不会触发对应的回调。
• 你在ajaxForDataTable中直接执行$.ajax，请求返回的结果没有传递给Datatables的渲染回调，表格自然拿不到数据进行渲染。

修复方案 #

方案1：返回Datatables兼容的配置对象（最简单） #

直接修改ajaxForDataTable，返回符合Datatables要求的ajax配置对象即可，Datatables会自动使用该配置发起请求，且能正确识别dataSrc字段：

function ajaxForDataTable(url, methodType, dataCallback, dataSrcCallback) {
    return {
        type: methodType,
        url: baseUrl + url,
        data: dataCallback,
        dataSrc: dataSrcCallback,
        error: function (jqXHR) {
            // 通用错误处理逻辑统一写在这里
        }
    }
}

方案2：自定义请求逻辑（适合需要额外控制请求流程的场景） #

如果需要自行控制请求的全流程，可以返回Datatables支持的自定义请求函数，手动处理参数、请求、数据回调逻辑：

function ajaxForDataTable(url, methodType, dataCallback, dataSrcCallback) {
    // 返回Datatables要求的自定义请求函数格式
    return function(data, callback, settings) {
        // 处理请求参数
        const requestParams = dataCallback ? dataCallback(data) : data;
        $.ajax({
            type: methodType,
            url: baseUrl + url,
            data: requestParams,
            success: function(res) {
                // 手动执行dataSrc回调处理返回数据
                const processedData = dataSrcCallback ? dataSrcCallback(res) : res.items;
                // 调用Datatables内置回调传递数据，触发表格渲染
                callback(processedData);
            },
            error: function (jqXHR) {
                // 通用错误处理逻辑
            }
        });
    }
}

调用示例 #

两种方案的初始化代码都不需要修改，保持你原有的写法即可：

$table.DataTable({
    lengthMenu: [10, 25, 50, 100],
    processing: true,
    paging: true,
    ajax: ajaxForDataTable(url, methodType, function (d) { 
        // 页面自定义请求参数处理逻辑写在这里
        return d;
    }, dataSrcCallback),
    "columns": [/* 你的列配置 */]
});

function dataSrcCallback(json) {
    // 页面自定义返回数据处理逻辑
    return json.items;
}

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