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

时间:2017-08-24 18:02:07

标签: javascript json datatable datatables

我对数据表很新。我需要使用除默认数据表响应之外的自定义响应来填充数据表。

请参阅此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,但我很了解如何管理数据表中的嵌套响应。

任何想法,如何将这些数据填充到数据表中。 ?还是有什么好的参考?

1 个答案:

答案 0 :(得分:0)

好的,所以在google的一些帮助下,我设法显示正确的响应,我使用了follwoiung 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" }
                ],

            });


});

我希望它会帮助其他人!!