issue nested datatabale with ajax data

milindsaraswala

I am trying to create datatable with ajax data. My parent table is showing correct but when I click on the second table it showing just id.

I don't know why it is not showing table but just showing id value. I tried to console.log format function it shows full table code but on click only it don't works :(

HTML Code for table structure

<table id="gatePass" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Company Name</th>
            <th>From Date</th>
            <th>To Date</th>
            <th>Approver</th>
            <th style="display:none">itemId</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Parent jQuery table code

var a = "/_api/lists/getbytitle('GatePass')/items?$select=Id,Title,FromDate,ToDate,Approver";
        $.ajax({
            url: a,
            type: "GET",
            async: false,
            headers: {
                ACCEPT: "application/json;odata=verbose"
            },
            success: function (e) {
                var data = e.d.results;
                $.each(data, function (e, t) {
                    html += "<tr><td></td><td>" + t.Title + "</td><td>" + moment(t.FromDate).format('DD-MMM-YYYY hh:mm A') + "</td><td>" + moment(t.ToDate).format('DD-MMM-YYYY hh:mm A') + "</td><td>" + t.Approver + "</td><td style='display:none'>" + t.Id + "</td></tr>"
                })
                $("#gatePass > tbody").append(html);
            },
            error: function () {
                console.log("error");
            }
        });
        var table = $("#gatePass").DataTable({
            "columns": [
            {
                "className": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "fromDate" },
            { "data": "toDate" },
            { "data": "approver" },
            { "data": "Id" }
            ]
        });

JQuery Code for child table

$('#gatePass tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);
            var itemId = row.data().Id;

            if (row.child.isShown()) {
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                row.child(format(itemId)).show();
                console.log(format(itemId));
                tr.addClass('shown');
            }
        });

function format for child table

function format(d) {
    var gatePassDetail = "";
    var a = "/_api/lists/getbytitle('GatePassDetails')/items?$select=Id,Title,Nationality,JobTitle,PassportNo&$filter=GatePassID eq " + d;
    gatePassDetail += "<table id='gatePassDetail' class='display'><thead><tr><th>Name</th><th>Nationality</th><th>Job Title</th><th>Passport No</th><th>Documents</th></tr></thead><tbody>"
    $.ajax({
        url: a,
        type: "GET",
        async: false,
        headers: {
            ACCEPT: "application/json;odata=verbose"
        },
        success: function (e) {
            var data = e.d.results;
            $.each(data, function (e, t) {
                gatePassDetail += "<tr><td></td><td>" + t.Title + "</td><td>" + t.Nationality + "</td><td>" + t.JobTitle + "</td><td>" + t.PassportNo + "</td><td><a href='#'></a></td></tr>"
            })
        },
        error: function () {
            console.log("error");
        }
    });
    gatePassDetail += "</tbody></table>";
    return gatePassDetail;
}