Dynamic drill down tables

ybathia

I want to have a tables where if you click on a row , it will allow user to drill down and get more info about that row. The number of drill down tables or details table should be dynamic. One row can drill down and show 3 records and other row could drill down and show 2 records.. I found this example http://jsfiddle.net/headwinds/zz3cH/ but I find it very complicated.Just wanted to know if there is any official solution to implement this?

ybathia

My data is in this format

[
{ 'site': "USA",
'site_allocated': 4158L,
'site_used': 3581L,
'data': {
u'tenant1': {
'flavor_info': [
{
'flavor_allocated': 5L,
'name': u'abcdef',
'flavor_used': 4L
},
{
'flavor_allocated': 5L,
'name': u'pqrst',
'flavor_used': 1L
}
],
'tenant_used': 5L,
'tenant_allocated': 10L
},
u'tenant2': {
'flavor_info': [
{
'flavor_allocated': 50L,
'name': u'aabbhdg',
'flavor_used': 50L
}
],
'tenant_used': 50L,
'tenant_allocated': 50L
},
},
},
{ 'site': "FRA",
'site_allocated': 4158L,
'site_used': 3581L,
'data': {
u'tenant1': {
'flavor_info': [
{
'flavor_allocated': 5L,
'name': u'hdjfur',
'flavor_used': 4L
},
{
'flavor_allocated': 5L,
'name': u'kkdjf',
'flavor_used': 1L
}
],
'tenant_used': 5L,
'tenant_allocated': 10L
},
u'tenant2': {
'flavor_info': [
{
'flavor_allocated': 50L,
'name': u'hhdyfht',
'flavor_used': 50L
}
],
'tenant_used': 50L,
'tenant_allocated': 50L
},
},
}
]

fbas

I cleaned up your JSON (and ran it through JSON Lint http://jsonlint.com/ )

can you explain how your data works? I'm not sure what you are trying to accomplish with datatables.

[
    {
        "site": "USA",
        "site_allocated": "4158L",
        "site_used": "3581L",
        "data": {
            "tenant1": {
                "flavor_info": [
                    {
                        "flavor_allocated": "5L",
                        "name": "abcdef",
                        "flavor_used": "4L"
                    },
                    {
                        "flavor_allocated": "5L",
                        "name": "pqrst",
                        "flavor_used": "1L"
                    }
                ],
                "tenant_used": "5L",
                "tenant_allocated": "10L"
            },
            "tenant2": {
                "flavor_info": [
                    {
                        "flavor_allocated": "50L",
                        "name": "aabbhdg",
                        "flavor_used": "50L"
                    }
                ],
                "tenant_used": "50L",
                "tenant_allocated": "50L"
            }
        }
    },
    {
        "site": "FRA",
        "site_allocated": "4158L",
        "site_used": "3581L",
        "data": {
            "tenant1": {
                "flavor_info": [
                    {
                        "flavor_allocated": "5L",
                        "name": "hdjfur",
                        "flavor_used": "4L"
                    },
                    {
                        "flavor_allocated": "5L",
                        "name": "kkdjf",
                        "flavor_used": "1L"
                    }
                ],
                "tenant_used": "5L",
                "tenant_allocated": "10L"
            },
            "tenant2": {
                "flavor_info": [
                    {
                        "flavor_allocated": "50L",
                        "name": "hhdyfht",
                        "flavor_used": "50L"
                    }
                ],
                "tenant_used": "50L",
                "tenant_allocated": "50L"
            }
        }
    }
]

ybathia

Hi @fbas,
Thank you for cleaning up my data. So, the parent table has columns tenant_name ("tenant1", "tenant2" ...) tenant_used and tenant_allocated. When the user clicks on any tenant row in the parent table, I want to show the flavor_info list for that tenant. Since flavor_info is a list and it can have one, two or three flavors, I want the child table to be generated dynamically.

fbas

https://datatables.net/reference/api/row().child().show()

can you set up a jsfiddle to show me what you have so far?