使用自定义嵌套响应填充数据表答案

【问题标题】：Populate datatable with custom nested response使用自定义嵌套响应填充数据表
【发布时间】：2026-02-23 20:55:02
【问题描述】：

我对数据表很陌生。而且我需要使用默认数据表响应以外的自定义响应填充数据表。

请看这个fiddle。简单的响应工作正常，但现在我需要用更复杂的响应填充数据表。下面是我的代码。

HTML

<table id="table" class="display responsive nowrap" cellspacing="0" width="100%">
    <thead style="background-color:#303641;color:#fff;">
        <tr>
            <th>id</th>
            <th>number</th>
            <th>maxDate</th>
            <th>minDate</th>
            <th>number2</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

JAVASCRIPT

$(document).ready(function() {
    var result = '{"msg":"success","code":"200","status":null,"data":[{"id":3663101,"lstImeis":[{"number":"18966399926043","maxDate":"2017-08-24 22:08:58.0","minDate":"2017-08-24 22:08:58.0"},{"number":"22418344742097","maxDate":"2017-08-24 18:08:56.0","minDate":"2017-08-24 18:08:56.0"}],"number2":789},{"id":3665337,"lstImeis":[{"number":"32756451080799","maxDate":"2017-08-24 21:09:38.0","minDate":"2017-08-24 21:09:38.0"},{"number":"42540009239622","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"}],"number2":456}],"draw":0,"limit":0,"recordsFiltered":0,"recordsTotal":0}';

    var json = JSON.parse(result);
    var tableData = json.data;

    $('#table').DataTable({
        "processing": true,
        "serverSide": false,
        "bFilter": false,
        "aaData": tableData,
        "aoColumns": [{
            "mData": "id"
        }, {
            "mData": "number"
        }, {
            "mData": "maxDate"
        }, {
            "mData": "minDate"
        }, {
            "mData": "number2"
        }]
    });


});

有了这个JSON 响应，我无法在数据表中填充所需的数据。我也创建了这个fiddle。

我也研究过这个link，但我不明白如何管理数据表中的嵌套响应。

任何想法，如何将此数据填充到数据表中。 ?或者有什么好的参考吗？

【问题讨论】：

您下面的示例与 DataTable 版本 1.10 有关，但您使用的是旧版本的 DataTable。
请检查这个fiddle 它显示了id 和number2 值但不显示其他值？

标签： javascript json datatable datatables

【解决方案1】：

好的，所以在谷歌的帮助下，我设法显示了正确的响应，我使用以下 java 脚本代码将我的数据填充到数据表中。

$(document).ready(function () {
    var result = '{"msg":"success","code":"200","status":null,"data":[{"id":3663101,"lstImeis":[{"number":"18966399926043","maxDate":"2017-08-24 22:08:58.0","minDate":"2017-08-24 22:08:58.0"},{"number":"22418344742097","maxDate":"2017-08-24 18:08:56.0","minDate":"2017-08-24 18:08:56.0"}],"number2":789},{"id":3665337,"lstImeis":[{"number":"32756451080799","maxDate":"2017-08-24 21:09:38.0","minDate":"2017-08-24 21:09:38.0"},{"number":"42540009239622","maxDate":"2017-08-24 16:35:08.0","minDate":"2017-08-24 16:35:08.0"}],"number2":456}],"draw":0,"limit":0,"recordsFiltered":0,"recordsTotal":0}';

  var json = JSON.parse(result);
  var tableData = json.data;

  $('#table').DataTable({
                "processing": true,
            "serverSide": false,
            "bFilter": false,
            "aaData": tableData,
                "aoColumns": [
                        { "mData": "id" },
                        { "mData": "lstImeis.0.number" },
                        { "mData": "lstImeis.0.maxDate" },
                        { "mData": "lstImeis.0.minDate" },
                        { "mData": "number2" }
                ],

            });


});

我希望它会帮助别人！！

【讨论】：