Why my dataTables does not appear using $.each inside function?

mastersuse

I have nested array json object (Layer 1, Layer 2 and Layer 3). My problem is dataTables **features ** such as search box and pagination does not appear. Any related CDN has been imported. The table just only display standard table. I have referred many websites, but it did not solve my problem.

JSON

{
    "status": "Success",
    "data": [{
        "project_id": "1",
        "project_name": "project name",
        "l1_task": [{
            "l1_id": "1",
            "l1_name": "Layer 1",
            "l2_task": [{
                "l2_id": "1",
                "l2_name": "Layer 2",
                "l3_task": [{
                        "l3_id": "1",
                        "l3_name": "Layer 3.1"
                    },
                    {
                        "l3_id": "2",
                        "l3_name": "Layer 3.2"
                    }
                ]
            }]
        }]
    }]
}

JS

$(document).ready(function() {

    loadtable();

    $('#Layer3Table').DataTable({
        ajax: {
            url: "exampleData/activity.json"
        },
        columns: [{
                data: "l1_task.0.l2_task.0.l3_task.0.l3_id"
            },
            {
                data: "l1_task.0.l2_task.0.l3_task.0.l3_name"
            }
        ],
    });

    function loadtable() {
        var project = '';
        $.ajax({
            url: "exampleData/activity.json",
            crossDomain: true,
            type: 'POST',
            dataType: 'json',
            data: "data",
            success: function(response) {
                if (response.status == "Success") {
                    // Layer 1 array object
                    $.each(response.data[0].l1_task, function(key, value) {
                    project +=
                        "<div>" +
                            "<div>";
                                // Layer 2 array object
                                $.each(value.l2_task, function(key1, value1) {
                                project +=
                                    "<div>" +
                                        "<div>" +
                                            // Layer 3 array object
                                            "<div class='table-responsive'>" +
                                                "<table id='Layer3Table' class='table table-striped' style='width:100%'>" +
                                                    "<thead>" +
                                                        "<tr>" +
                                                            "<th class='text-center'>ID</th>" +
                                                            "<th class='text-center'>Activity Name</th>" +
                                                        "</tr>" +
                                                    "</thead>";
                                                    $.each(value1.l3_task, function(k, v) {
                                                    project +=
                                                        "<tr>" +
                                                            "<td>" + v.l3_id + "</td>" +
                                                            "<td>" + v.l3_name + "</td>" +
                                                        "</tr>";
                                                    }); // for Layer 3
                                                    project +=
                                                "</table>" +
                                            "</div>"+
                                        "</div>" + 
                                    "</div>";
                                }); // for Layer 2
                                project += "</div>" + "</div>";
                    }); // for Layer 1
                    $("#projectDetail2").append(project);
                } else {}
            },
            error: function(e) {}
        });
    }
});

colin

Everything looks like it should work. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

mastersuse

This is the test case, but have many errors when paste the code here.

live.datatables.net/robinoya/2/edit

kthorngren

Why are you doing both the loadtable() function and using ajax in the Datatable config? This is causing the table data to be fetched twice and built twice.
The conflict might be the problem. Try commenting out the loadtable() call in line 3 to see if Datatables now works.

EDIT: If you still have problems look in the browser's console for errors. Do you get any?

Kevin

mastersuse

I already commented the first loadtable();, the problem when loadtable(); is commented, it is unable to display function loadtable(){....} which consist of my nested layer as posted image above.

kthorngren

Both Datatables and loadtable() are duplicating the effort of fetching the data and populating the table. If you prefer to use loadtable()to build the table then remove this code:

    $('#Layer3Table').DataTable({
        ajax: {
            url: "exampleData/activity.json"
        },
        columns: [{
                data: "l1_task.0.l2_task.0.l3_task.0.l3_id"
            },
            {
                data: "l1_task.0.l2_task.0.l3_task.0.l3_name"
            }
        ],
    });

And initialize Datatables after you build the table, for example:

                    }); // for Layer 1
                    $("#projectDetail2").append(project);
                    $('#Layer3Table').DataTable();
                } else {}

Datatables will initialize using the DOM sourced table.

Kevin

mastersuse

You are brilliant!! Thank so much. I just add only that and solved my problem. thanks again.. May god bless you.

mastersuse

I just checking, have another problem, why only datatables is reflect at 1 place only?
I thought it is looping as I need it to be looping to another Layer 3 tables.

kthorngren

If you are using $('#Layer3Table').DataTable(); then the HTML id its going to attach to is Layer3Table. You can only have one HTML id on a page. Each of your tables should have a unique id.

Here is an example of using Datatables with multiple tables:
https://datatables.net/examples/basic_init/multiple_tables.html

Kevin

mastersuse

Thank you again. This answer solved my problem.