Populate a DataTable body from JS function using Ajax?

lotoole_6899

Hi,

I am new to dataTable and I am trying to implement a datatable on an existing table I have. The table is shared over 3 tabs and populated via a JS function with a nested ajax call.
Here is the existing JS

/*
Switching tabs
*/
var MANUAL = "MANUAL_TRANSACTIONS";
var AUTO_MATCH = "AUTO_MATCH_TRANSACTIONS";
var INDICATIVE = "INDICATIVE_PRICING_TRANSACTIONS";

$(document).ready(function() {
    $("#noRecordFound").hide();
    getTransactionListing(AUTO_MATCH);
    getAwaitingFundsSubQueuesCount();
    $("#manualTrans").click(function(event) {   
        event.preventDefault();
        $(this).parent().addClass("active");
        $(this).parent().siblings().removeClass("active");
        $(".firstRow").nextAll().remove();
        getTransactionListing(MANUAL);
    });
    
    $("#automatchTrans").click(function(event) {    
        event.preventDefault();
        $(this).parent().addClass("active");
        $(this).parent().siblings().removeClass("active");
        getTransactionListing(AUTO_MATCH);
    });
    
    $("#indicativepriceTrans").click(function(event) {  
        event.preventDefault();
        $(this).parent().addClass("active");
        $(this).parent().siblings().removeClass("active");
        $(".firstRow").nextAll().remove();
        getTransactionListing(INDICATIVE);
    });
});

function getTransactionListing(selection) {
    var request = $.ajax({
        type: "GET",
        url: contextPath+"/app/queues/awaitingFunds/itemListings/"+selection,
        dataType: "json",
        success: function(resultData){
            var transactions = resultData.data;     
            var status = resultData.status;
            if(status == "Success"){
                if(transactions.length == 0) {
                    $("#noRecordFound").show();
                }else {
                    $(".firstRow").nextAll().remove();
                    $.each(transactions, function(i, transData) {
                        var tablerowClass = (i%2==0)?"tablerow1":"tablerow2";
                        if (selection !== AUTO_MATCH) {
                            tablerowClass += transData.awaitingFundQueueTransactionColour;
                        }
                        var itemListingDetails   = "<tr class='"+tablerowClass+"'>";
                            itemListingDetails  += "<td><span>"+transData.transactionReference+"</span></td>";
                            itemListingDetails  += "<td><span>"+transData.clientName+"</span></td>";
                            itemListingDetails  += "<td class='alignCenter'><span>"+transData.ccy+"</span></td>";
                            itemListingDetails  += "<td class='alignRight'><span>"+transData.paymentCcyAmount+"</span></td>";
                            itemListingDetails  += "<td class='alignRight'><span>"+transData.lceAmount+"</span></td>";
                            itemListingDetails  += "<td class='alignCenter'><span>"+transData.valueDate+"</span></td>";
                            itemListingDetails  += "<td><span>"+transData.settlementMethod+"</span></td>";
                            itemListingDetails  += "<td><span>"+transData.originatingPayer+"</span></td>";
                            itemListingDetails  += "</tr>";
                        $(".firstRow").after(itemListingDetails);   
                    }); 
                }
            }
            else{
                $(".errorDiv").html("Error Message");
            }   
        }   
    });
}

I am not sure how I would call the dataTable and maintain the existing functionality, i.e. to populated said table accordingly based on which tab is displayed?

Something like?

    $('#displayTable').dataTable({
        "data": getTransactionListing(AUTO_MATCH)
    });
    

Thanks in advance

allan

Rather than creating the HTML elements in your string I would suggest you let DataTables do it for you. Indeed, I don't see anything in the above that would preclude using ajax. I'd suggest reading over the Ajax section of the manual.

You can't use $().after() to insert rows into the table for the reasons discussed in this FAQ.

Allan

lotoole_6899

Topic can be closed. I solved it myself some time ago.