显示 DataTables 中嵌套对象的集合

Question

[
{
    "name": "Tiger Nixon",
    "position": "System Architect",
    "salary": "0,800",
    "start_date": "/Date(1429653550233)/",
    "IssueList": null
},
{
    "name": "Tiger Nixon 1",
    "position": "System Architect 1",
    "salary": "0,800",
    "start_date": "2011/04/25",
    "IssueList": [
        {
            "Number": 1,
            "IssueDate": "/Date(1429653550233)/",
            "Issue": "Lots of Problems"
        },
        {
            "Number": 2,
            "IssueDate": "/Date(1429185060000)/",
            "Issue": "Lots of Problems here too"
        }
    ]
},
{
    "name": "Tiger Nixon 2",
    "position": "System Architect 2",
    "salary": "0,800",
    "start_date": "2011/04/25",
    "IssueList": [
        {
            "Number": 3,
            "IssueDate": "/Date(1429653550233)/",
            "Issue": "Lots of Problems"
        },
        {
            "Number": 4,
            "IssueDate": "/Date(1429185060000)/",
            "Issue": "Lots of Problems here too"
        }
    ]
},
{
    "name": "Tiger Nixon 3",
    "position": "System Architect 3",
    "salary": "0,800",
    "start_date": "2011/04/25",
    "IssueList": null
}

]

我想在"DataTables"中显示上面的JSON。当用户单击一行时，IssueList 中的嵌套对象应显示为主要 table 中的子对象 table。

如何在 "DataTables" 中完成此操作？我是 "DataTables" 和 JavaScript 的新手，非常感谢您的帮助。

Answer 1

我不是 100% 确定我会以这种方式使用数据table。我做了类似的事情，但我没有在单元格中添加 table，而是添加了一个定义列表......我认为否则你运行有制作 table 的风险比较忙。

但是，如果您确信这是您想要的方式，我会查看列上的渲染调用，并给出一个创建 table... 或 dl 的函数。 ..

$("#myTable").DataTable({
    "data": data,
    "columns": [
        { 
            "title": "Name",
            "data": "name"
        }, { 
            "title": "Position",
            "data": "position" 
        }, { 
            "title": "Salary",
            "data": "salary" 
        }, { 
            "title": "Start Date",
            "data": "start_date" 
        }, { 
            "title": "Issue List",
            "data": "IssueList",
            "render": function(d){
                if(d !== null){
                    var table = "<table>";
                    $.each(d, function(k, v){
                        table += "<tr><td>" + v.Issue + "</td><td>" + v.IssueDate + "</td><td>" + v.Number + "</td></tr>";
                    });
                    return table + "</table>";
                }else{
                    return "";
                }
            }
        }
    ]
});

Working Example

显示 DataTables 中嵌套对象的集合

Display collection of nested objects in DataTables

javascript

json

datatables