使用DataTables时动态加载的HTML表格无法加载数据

问题描述 #

我是DataTables新手，单页Web应用会将HTML表格动态加载到首页，但遇到数据无法加载到表格中的问题。在tbody_data(dataSet)函数中通过document.write(JSON.stringify(dataSet))能看到数据格式正确，但数据始终无法加载到表格里。

相关代码 #

首页部分

<body>
    <div id="container1" class="inline-block">
        <input id="search-input" class="input-control" type="text" size="25" value="">          
        <button class="btn btn-primary btn-sm" type="button" onclick="getPlants()">Search</button>       
    </div>

    <div id="container2"></div>     

    <script src="js/pl.js"></script>
    <script src="js/common.js"></script>
    
</body>

数据获取与表格初始化代码

function getPlants(){
    var dataSet = '';
    var Search_Value = $("#search-input").val();
        Search_Value = Search_Value.trim();
            $.ajax({
                type: 'POST',                               
            url: "php/get_plants.php",
            data: "searchText="+Search_Value,
            datatype: "json",
                success:function(data){
                    dataSet = JSON.parse(data);
                function tbody_data(dataSet){
                    //document.write(JSON.stringify(dataSet));
                    //return;
                    $("#grid_plants").dataTable({
                                    data: dataSet,
                                    fixedHeader: true,
                                    deferRender: true,
                                    paging: false,
                                    columns: [
                                            { 'data': 'id' },
                                        { 'data': 'plantname' }
                                        ]
                            });
                $("#container2").load("html/grid_plants.html",tbody_data);
            }
                error: function(status) {
                        alert(status);
            }
        });

    }
}

动态加载的表格文件（/html/grid_plants.html）

<table id="grid_plants">
    <thead>
                <tr>
                    <th>ID</th>
                    <th>Plants</th>
            </tr>
        </thead>
            <tbody id="tbody_plants"></tbody>
        <tfoot>
                <tr>
                    <th>ID</th>         
                    <th>Plants</th>
                </tr>
        </tfoot>
</table>

AJAX返回的数据

[["1","Sweet Birch"],["2","River Birch"],["3","Yellow Birch"],["4","Chinese Red Birch"]]

问题诊断 #

• 数据格式与配置不兼容：AJAX返回的是二维数组，但DataTables初始化时columns配置使用的是对象属性（'id'、'plantname'），两者无法匹配。
• 代码执行顺序错误：当前代码先定义初始化函数再加载表格，导致初始化时表格DOM还未存在；且load回调的参数传递逻辑有误。
• AJAX参数拼写错误：datatype应为dataType（jQuery对参数大小写敏感），否则无法自动解析JSON数据。

修复方案 #

1. 匹配数据格式与Columns配置 #

两种可选方案：

• 方案A：修改Columns配置适配二维数组
  直接使用数组索引对应数据位置：

  columns: [
    { 'data': 0 }, // 对应二维数组第一个元素（ID）
    { 'data': 1 }  // 对应二维数组第二个元素（植物名称）
  ]
  

• 方案B：修改后端返回对象数组
  让get_plants.php返回如下格式的JSON，保持原有Columns配置不变：

  [{"id":"1","plantname":"Sweet Birch"},{"id":"2","plantname":"River Birch"},{"id":"3","plantname":"Yellow Birch"},{"id":"4","plantname":"Chinese Red Birch"}]
  

2. 修正代码执行顺序与逻辑 #

调整AJAX成功回调的逻辑，先加载表格DOM，再初始化DataTables：

function getPlants() {
    var Search_Value = $("#search-input").val().trim();
    $.ajax({
        type: 'POST',                               
        url: "php/get_plants.php",
        data: "searchText=" + Search_Value,
        dataType: "json", // 修正参数拼写错误
        success: function(dataSet) {
            // 先加载表格HTML，加载完成后执行初始化
            $("#container2").load("html/grid_plants.html", function() {
                // 新版DataTables推荐使用DataTable()（大写D）初始化
                $("#grid_plants").DataTable({
                    data: dataSet,
                    fixedHeader: true,
                    deferRender: true,
                    paging: false,
                    columns: [
                        { 'data': 0 }, // 对应二维数组索引，若用对象数组则改为'id'
                        { 'data': 1 }  // 对应二维数组索引，若用对象数组则改为'plantname'
                    ]
                });
            });
        },
        error: function(xhr) {
            alert("请求失败：" + xhr.statusText); // 显示更明确的错误信息
        }
    });
}

3. 额外注意事项 #

• 确保已正确引入DataTables的JS和CSS文件（当前代码未体现，需确认）。
• 调试时用console.log(dataSet)替代document.write，避免破坏页面结构。

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