为何JQuery DataTable无法从数组加载高尔夫球员数据？

尝试通过API调用创建高尔夫球员的DataTable，但表格仅显示“No data available in table”。经调试确认数据数组已包含正确的信息与格式，查阅DataTable文档后仍未找到问题所在。

最初尝试在DataTable函数内通过ajax加载数据，失败后拆分为单独的ajax调用以便调试。

JavaScript代码：

let data;
$.ajax({
    url: "https://pure-peak-65624.herokuapp.com/https://api.sportradar.us/golf/trial/v3/en/players/wgr/2022/rankings.json?api_key=rupvugmcybede53f3svuqqa8",
    dataType: 'json',
    success: function (json) {
        console.log("success");
        data = json.players;
    },
    error: function (e) {
        console.log("error");
    }
});

$('#myTable').DataTable({
    data: data,
    columns:[
        {data: 'id'},
        {data: 'first_name'}
    ]
});

空DataTable截图：

问题核心是AJAX的异步特性：初始化DataTable时，AJAX请求还没完成，data变量仍为undefined，导致表格无数据可渲染。

方案1：在AJAX成功回调内初始化DataTable #

把DataTable的初始化代码移到AJAX的success函数里，确保拿到数据后再渲染表格：

$.ajax({
    url: "https://pure-peak-65624.herokuapp.com/https://api.sportradar.us/golf/trial/v3/en/players/wgr/2022/rankings.json?api_key=rupvugmcybede53f3svuqqa8",
    dataType: 'json',
    success: function (json) {
        console.log("success");
        $('#myTable').DataTable({
            data: json.players,
            columns:[
                {data: 'id'},
                {data: 'first_name'}
            ]
        });
    },
    error: function (e) {
        console.log("error");
    }
});

方案2：使用DataTable内置AJAX功能（更推荐） #

DataTable原生支持AJAX配置，无需手动写$.ajax，它会自动处理异步加载和数据渲染，还自带加载状态提示：

$('#myTable').DataTable({
    ajax: {
        url: "https://pure-peak-65624.herokuapp.com/https://api.sportradar.us/golf/trial/v3/en/players/wgr/2022/rankings.json?api_key=rupvugmcybede53f3svuqqa8",
        dataType: 'json',
        dataSrc: 'players' // 指定数据来自返回JSON中的players数组
    },
    columns:[
        {data: 'id'},
        {data: 'first_name'}
    ]
});

关键说明 #

• 异步请求不会阻塞代码执行，原代码中$('#myTable').DataTable()会在AJAX请求完成前执行，此时data还未被赋值。
• 用DataTable内置AJAX能更好地兼容表格的分页、搜索、排序等功能，代码更简洁易维护。

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