How to display nested array in json using DataTables?

mastersuse

I have tried many solution but not solve my problem. The problem is how to display nested array in json using DataTables? For my example below, I want to display l3_id: "1" data only.

My Code as below:

$('#Layer3Table').DataTable({
        ajax: { 
            url: url_project_detail,
            crossDomain : true,
            type : "POST",
            cache : false,
            dataType : "json",
            contentType: "application/json",
            dataSrc : "data",
        },
        columns: [
            { data : "l3_id", "className": "text-center" },
            { data : "l3_name", "className": "text-center" }
        ],
    });

and the JSON as below:

{
    "data": [
        {
            "project_id": "1",
            "l1_task": [
                {
                    "l1_id": "1",
                    "l2_task": [
                        {
                            "l2_id": "1",
                            "l3_task": [
                                {
                                    "l3_id": "1",
                                    "l3_name": "My name"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

kthorngren

This example shows how to do this. Assuming the structure is the same for each row, something like this should work:
http://live.datatables.net/nuyayoli/1/edit

Notice that I used a console.log statement to help understand and build the structure needed to access l3_task.

Kevin

kthorngren

Updated the example to show two rows:
http://live.datatables.net/mopedidi/1/edit

Kevin

mastersuse

Why I try at my JS not working? dataTables features such as search box, pagination also not appear. I have try using data: "data" and also dataSrc: "data". Both are not working.

mastersuse

Please help me, this is my code.

http://live.datatables.net/militaxe/1/edit

kthorngren

dataTables features such as search box, pagination also not appear.

Likely you have Javascript errors. Check your browser's console for the errors and fix those.

Your example has syntax errors. You have the data object but are not assigning it to a variable which is causing Javascript errors.

I have try using data: "data" and also dataSrc: "data". Both are not working.

Looks like you want to use ajax to fetch the data. The data: "data" option won't be of use for your case. Since your data is in the data object you won't need to use dataSrc: "data" since that is the default.

Kevin