Displaying Master - Child table

Ramprosad

Hi,

I am new to data table and developed a page which displays master-child table based on example given on datatables.net .
On click of + sign on row, I do a ajax call to server and binds the returned records to a child table. My issue is function's return statement is fired prior to finishing the ajax call and on the the first hit I don't get any record. Onward second call it returns the records of first call and so on. Below is the code I have written. Any hep is highly appreciated.

   function ShowContainerData(obj) // this function is called on click of + sign of row.
    {

            var tr = $(obj).closest('tr');
            var row = table.row(tr);

            //console.log(row.data().ContainerNumber);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                $(obj).attr('src', '/Content/web/images/details_open.png')
                //tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child(format(row.data())).show();
               // tr.addClass('shown');
                $(obj).attr('src', '/Content/web/images/details_close.png')
            }

         //child table --end
    }

    /* Formatting function for row details - modify as you need */
    function format(d) {
        // `d` is the original data object for the row

        $.ajax({
            type: "POST",
            url: "/landside/generic/AwaitingBooking.aspx/GetDetailTableData",
            data: "{ ContainerNumber: '" + d.ContainerNumber + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: "false",
            cache: "false",
            success: function (output) {
                ordertable = '';
                ordertable = '<table class="display table table-bordered table-striped table-condensed table-hover nowrap">' +
                '<tr>' +
                    '<thead><th>Order Number</th>' + '<td>Lot</th>' + '<th>Priority</th><thead>'
                '</tr>';
                for (var order = 0;order<JSON.parse(output.d).length; order++)
                    {
                    ordertable = ordertable + '<tr>'
                        + '<td>' + JSON.parse(output.d)[order].OrderNumber + '</td>'
                        + '<td>' + JSON.parse(output.d)[order].Lot + '</td>'
                        + '<td>' + JSON.parse(output.d)[order].Priority + '</td>'
                        + '</tr>'

                    }
                    ordertable = ordertable+'</table>';
            },
            Error: function (x, e) {
                // On Error
            }
        });
        //alert(ordertable);
        return ordertable;

}

Thanks in advance ,
Ram