jQuery DataTables服务端模式无法加载表格行问题排查

使用DataTables v1.13.1搭建服务端模式表格，仅显示表头无数据行。服务器返回的JSON包含draw、recordsFiltered、recordsTotal等必填字段，数据数组在watchlist节点下，但通过ajax.dataSrc指定数据位置后完全无效——控制台显示dataSrc函数从未被调用，直接指定字符串watchlist也不行，且控制台无任何报错信息。

服务器响应 #

{
    "draw": 1,
    "recordsFiltered": 13,
    "recordsTotal": 13,
    "watchlist": [
        {
            "added": 1610556680,
            "status": 1151,
            "type": 2,
            "name": "Blah"
        },
        ...and 12 more with same exact format
    ]
}

HTML代码 #

<table id="my-datatable" class="stripe hover">
    <thead>
        <tr>
            <th>Added</th>
            <th>Type</th>
            <th>Status</th>
            <th>Name</th>
        </tr>
    </thead>
</table>

原脚本代码 #

var ajaxOpts = {
    url: '/MyEndpoint',
    success: function(data) {
        console.log('success', data); // looks fine
        $('#my-spinner').fadeOut(200);
    },
    error: function() {
        alert('Ajax Error...');
    },
    dataSrc: function(data) {
        console.log('dataSrc', data); // never called
        return JSON.parse(data).watchlist;
    },
    // dataSrc: 'watchlist', // also doesn't work
};

$('#my-datatable').DataTable({
    serverSide: true,
    ajax: ajaxOpts,
    pageLength: 50,
    columns: [
        { data: 'added' },
        { data: 'type' },
        { data: 'status' },
        { data: 'name' },
    ],
});

核心问题是你自定义了success回调函数——DataTables内部依赖自身的success逻辑来处理响应数据，包括调用dataSrc解析数据数组。你覆盖这个回调后，DataTables的内置处理流程被彻底打断，导致dataSrc完全不会执行。

修复步骤：

1. 移除自定义的success和error回调，改用DataTables提供的钩子处理加载状态和错误
2. 保留dataSrc: 'watchlist'即可正确指向数据数组

修改后的脚本示例：

var ajaxOpts = {
    url: '/MyEndpoint',
    complete: function() {
        // 请求完成后隐藏加载动画，无论成功失败都会执行
        $('#my-spinner').fadeOut(200);
    },
    dataSrc: 'watchlist' // 直接指定数据节点名称，DataTables会自动处理已解析的响应
};

$('#my-datatable').DataTable({
    serverSide: true,
    ajax: ajaxOpts,
    pageLength: 50,
    columns: [
        { data: 'added' },
        { data: 'type' },
        { data: 'status' },
        { data: 'name' },
    ],
    // 使用DataTables内置的error事件处理请求失败
    error: function(xhr, error, thrown) {
        alert('Ajax Error...');
    }
});

补充说明：

• 服务器返回的JSON会被自动解析为JavaScript对象，所以dataSrc函数里不需要额外JSON.parse(data)，直接返回data.watchlist即可（用字符串形式更简洁）
• 自定义success会绕过DataTables的响应处理流程，这是导致无数据的根本原因，必须移除

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