如何通过Ajax将JSON加载至DataTables实现客户端处理？配置后数据未加载

尝试使用DataTables的ajax选项加载本地JSON数据，同时启用deferRender，但数据完全无法加载到表格中。已确认使用客户端处理（serverSide: false），且data.json与index.html在同一目录。

现有代码 #

JSON（data.json） #

{
    "data": [
        {
            "name": "Bangladesh"
        },
        {
            "name": "Bhutan"
        },
        {
            "name": "Cambodia"
        }
    ]
}

JavaScript #

$(document).ready(function () {
    $("#example").DataTable({
        ajax: "data.json",
        columns: [{ data: "name" }],
        serverSide: false,
        deferRender: true,
    });
});

HTML #

<body>
    <div class="container">
        <table id="example" class="display" width="100%">
            <thead>
                <tr>
                    <th>name</th>
                </tr>
            </thead>
        </table>
    </div>
</body>

排查与解决步骤 #

1. 解决本地文件跨域限制
   直接通过file://协议打开本地HTML文件时，浏览器会阻止AJAX请求本地JSON文件。必须使用本地HTTP服务器访问，比如：

   • Python：执行python -m http.server 8000，然后访问http://localhost:8000/index.html
   • Node.js：安装http-server后执行http-server，访问对应地址

2. 检查依赖加载顺序
   DataTables依赖jQuery，必须先加载jQuery，再加载DataTables的JS和CSS文件，否则初始化会失败。

3. 验证JSON文件有效性
   确保JSON无语法错误（比如多余逗号、引号不匹配），可以用在线JSON校验工具检查。

4. 调试AJAX请求
   打开浏览器开发者工具（F12）→「Network」标签，查看data.json请求的状态：

   • 404错误：检查文件路径是否正确，确认data.json确实在index.html同目录
   • 200但数据未解析：检查JSON格式是否符合DataTables要求（必须包含data顶级键）

5. 关于deferRender
   该选项仅延迟表格行的渲染，不影响AJAX数据加载。数据加载失败与deferRender无关，先解决AJAX加载问题后，该选项会自动生效。

修正后的完整HTML示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DataTables AJAX测试</title>
    <!-- 加载DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
</head>
<body>
    <div class="container">
        <table id="example" class="display" width="100%">
            <thead>
                <tr>
                    <th>name</th>
                </tr>
            </thead>
        </table>
    </div>
    <!-- 先加载jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <!-- 再加载DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#example").DataTable({
                ajax: "data.json",
                columns: [{ data: "name" }],
                serverSide: false,
                deferRender: true
            });
        });
    </script>
</body>
</html>

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