Question

通常，为了填充Jquery数据表，我们需要将Json Array（json对象的数组）赋予datatable，并使用一列映射每个字段。但我有一个json对象，我想在同一行的下一个colmn中显示一列中的所有键及其相关值。

例如示例json： -

 {
"first-name": "Tom",
"last-name": "Hanks",
"Designation": "Developer"
 }

输出表： -

             Key          Value

            first-name    Tom
            last-name     Hanks
            Designation  Developer

这些键和值的数量将来可能会有所不同。

一种简单的方法是我可以遍历对象并将其转换为具有两个属性的对象数组，并用于填充表。但我想知道是否有其他直接的方式。

Answer 1

这似乎适用于您的示例数据：

var data = {
    "first-name": "Tom",
    "last-name": "Hanks",
    "Designation": "Developer"
};
var table = $('#example').DataTable({
    "columns": [
        {
            "data": "key",
            "title": "Key"
        },
        {
            "data": "value",
            "title": "Value"
        }
    ]
});
for(var key in data) {
    if(data.hasOwnProperty(key)) {
        table.row.add({
            "key": key,
            "value": data[key]
        });
    }
}
table.draw();

可能有一个更优雅的解决方案，但作为一个信封背面的东西它似乎运作良好 - 应该可以使用我回忆的回调来完成。你可以看到它正常工作here。

这是一个使用回调的小得多的方法：

var data = {
    "first-name": "Tom",
    "last-name": "Hanks",
    "Designation": "Developer"
};
var table = $('#example').DataTable({
    "columns": [{
        "data": "key",
        "title": "Key"
    },{
        "data": "value",
        "title": "Value"
    }],
    "initComplete": function() {
        this.api().rows.add(JSON.stringify(data).slice(2, -2).split('","').map((c)=>({
            "key": c.split('":"')[0],
            "value": c.split('":"')[1]
        }))).draw();
    }
});

如何使用键和值作为列从json对象填充数据表

1 个答案: