jQuery DataTable ajax获取JSON响应时无法填充表格数据问题

使用jQuery DataTable组件时，直接配置本地data数据源可正常加载渲染表格，切换为ajax方式请求后端接口后，返回的JSON数据无法填充到表格，相关代码、返回结构、DOM、问题截图如下。

DataTable初始化代码 #

// 本地测试数据（该配置下表格可正常渲染）
// var myObj ={"data": { "id":"John", "created_at":31 }};
// var data = [myObj];
$table = $('#client_search').DataTable({
    responsive: true,
    info: false,
    processing: true,
    // serverSide: true,
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'colvis',
            text: 'Show/Hide Columns'
        },
        'pageLength',
        'print',
        'excelHtml5'
    ],
    // 本地可用的数据源配置
    // data:data['data'],
    ajax: {
        url: '/admin/reports/client-search',
        type: 'post',
        dataSrc:'data',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    },
    columns: [
        {data:"id"},
        {data:"created_at"}
    ]
});

服务端返回响应 #

{"data":{"id":3,"created_at":"2021-07-30T18:30:36.000000Z"}}

表格DOM结构 #

<table class="table table-striped display responsive nowrap datatable" id="client_search">
    <thead>
        <tr>
            <th scope="col">id</th>
            <th scope="col">created at</th>
        </tr>
    </thead>
</table>

问题截图 #

核心问题是DataTable要求dataSrc指向的数据源必须是对象数组（每一个对象对应表格一行数据），你当前接口返回的data字段是单个对象，不是数组，哪怕只有一行数据也无法被识别渲染。
可按照以下优先级修复：

• 优先改后端返回结构：将data字段对应的值改为数组格式，哪怕只有一条数据也要用数组包裹，修改后返回格式如下，和你本地测试可用的数据源格式保持一致即可：

{
    "data": [
        {"id":3,"created_at":"2021-07-30T18:30:36.000000Z"}
    ]
}

• 无法修改后端时可在前端做数据转换：修改ajax配置里的dataSrc为函数，手动把返回的单个对象包装成数组再传给DataTable，配置示例：

ajax: {
    url: '/admin/reports/client-search',
    type: 'post',
    dataSrc: function(res) {
        // 把单条数据包装为数组返回
        return [res.data];
    },
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
}

• 额外排查项：打开浏览器开发者工具的Network面板，确认接口请求返回200状态码、无CSRF报错、响应头Content-Type为application/json，如果返回纯文本/html格式DataTable会解析JSON失败，也无法填充数据。

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