使用Ajax填充DataTable异常：仅首列显示最后列数据的解决方法

我尝试通过Ajax调用填充DataTable，但仅第一列显示columns配置中最后一个字段的值。实际显示中id列展示的是code字段的值，该如何解决？

我的代码： #

$(document).ready(function() { 
    $.ajax({ 
        url: "http://192.168.2.32:5000/get_all_locations", 
        'method': 'GET', 
        'contentType': 'application/json' 
    }).done(function(data) { 
        console.log('dataaa', data); 
        $('#myTable').dataTable({ 
            'aaData': data['data'], 
            "columns": [{ "data": "id", "data": "name", "data": "code" }] 
        }) 
    }) 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>Code</th>
</tr>
</thead>
</table>

返回的data数据： #

{
    "StatusCode": true,
    "StatusDescription": "Location details has been pulled successfully.",
    "data": [
        { "code": "1007", "id": 20, "is_free_zone": true },
        { "code": "1002", "id": 15, "is_free_zone": false },
        // ...共9条数据
    ]
}

问题原因与解决方法 #

你在columns配置里犯了一个很容易忽略的小错误：把三个字段的配置都写在了同一个对象里。在JavaScript中，如果一个对象存在重复的键（比如这里连续三个"data"），后面的键值对会直接覆盖前面的，所以最终这个列对象里只剩下"data": "code"这一个有效配置。再加上你只定义了一个列对象，DataTable就只会渲染一列，并且用code的值填充，这就是为什么id列显示的是code的内容。

修正后的代码 #

只需要把columns改成包含三个独立对象的数组，每个对象对应表头的一列：

$(document).ready(function() { 
    $.ajax({ 
        url: "http://192.168.2.32:5000/get_all_locations", 
        method: 'GET', 
        contentType: 'application/json' 
    }).done(function(data) { 
        console.log('dataaa', data); 
        $('#myTable').dataTable({ 
            aaData: data['data'], 
            columns: [
                { "data": "id" },
                { "data": "name" },
                { "data": "code" }
            ] 
        }) 
    }) 
})

这样配置后，每一个对象对应表头的一列，分别绑定id、name、code字段，DataTable就能正确渲染出三列对应的数据了。

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