代码之家 › 专栏 › 技术社区 › Yannic Hamann

以声明方式从嵌套JSON填充DataTable

datatables jquery

Yannic Hamann · 技术社区 · 8 年前

我有一个返回以下内容的API JSON :

{ "data": [
    {
        "sensors": [
            {
                "description": "Second Sensor",
                "value": 6.0
            },
            {
                "description": "My Default Sensor",
                "value": 8.0
            }
        ],
        "timestamp": "2018-04-01T00:00:00"
    },
    {
        "sensors": [
            {
                "description": "Second Sensor",
                "value": 8.0
            },
            {
                "description": "My Default Sensor",
                "value": 6.0
            }
        ],
        "timestamp": "2018-03-31T23:59:59"
    }
] }

我只想渲染第一个元素 data[0] 在 DataTable 。

<table width="100%" class="table table-striped table-hover" id="dataTable">
    <thead>
        <tr>
            <th>Sensor</th>
            <th>Value</th>
        </tr>
    </thead>
</table>

我希望它能显示:

Second Sensor          6.0
My Default Sensor      8.0

我可以用声明的方式 DataTables 还是必须通过客户端API修改返回的数据 JavaScript ,然后我将其传递给 数据表 ?

以下代码不是我想要的,因为它总是只显示一个传感器。

$('#dataTable').DataTable({          
    ajax: 'myapiurl',
    columns: [
        { "data": "sensors.0.description" },
        { "data": "sensors.0.value" 
    ]
});

1 回复 | 直到 8 年前

Yannic Hamann 8 年前

我想出了以下解决方案:

$.getJSON('url', function (response) {
    var dataSet = response.data[0].sensors;

    $('#dataTable').DataTable({
        data: dataSet,
        columns: [
            { data: "description" },
            { data: "value" }
        ]
    });
});

推荐文章