Display collection of nested objects in DataTables

Question

[
{
    "name": "Tiger Nixon",
    "position": "System Architect",
    "salary": "$320,800",
    "start_date": "/Date(1429653550233)/",
    "IssueList": null
},
{
    "name": "Tiger Nixon 1",
    "position": "System Architect 1",
    "salary": "$420,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": "$520,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": "$620,800",
    "start_date": "2011/04/25",
    "IssueList": null
}

]

I want to display the above JSON in "DataTables". The nested objects in the IssueList should be displayed as a child table inside the main table when the user clicks on a row.

How can this be done in "DataTables"? I am very new to "DataTables" and JavaScript and would appreciated your help.

annoyingmouse · Accepted Answer · 2015-04-24 15:18:28Z

3

I'm not 100% sure I'd use Datatables in this way. I've done something similar but rather than adding a table in a cell I've added a definition list... I think otherwise you're running the risk of making the table rather busy.

But if you're convinced that this is the way you want to go I'd look at the render call on the column and give is a function to create a table... or 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

answered Apr 24, 2015 at 15:18

annoyingmouse

5,6991 gold badge31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RDs Over a year ago

Thank you. I appreciate the response. I don't want to render inside a column, I was looking for a more master-detail table within the master table. I would like the "Issue" data render as a separate table on the row below. The detail would show on mouse hover.

annoyingmouse Over a year ago

Ahh, looks like you'll be needing row grouping. The example will need tweaking though as it looks as though your data sometimes has top level entries without an IssueList and the example looks at creating rows using what would be your IssueList data. Another approach might be to use Sliding child rows - that might work better!

Collectives™ on Stack Overflow

Display collection of nested objects in DataTables

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related