Error using jQuery datatable

rssoy

I am new to jquery and using jquery data table to list result. datatable is making a ajax call to fetch data. I can see from console log that data is retrieved properly. But it does not render correctly. I am getting error as "
DataTables warning (table id = 'datatable'): Requested unknown parameter '2' from the data source for row 1". There are 3 columns in the UI. "Country" column is populated with "U" and "Name" column is populated with "S". Where it should be "US" in country column, bank name in the second column and address in 3rd column. Not sure what I am missing. Any help is greatly appreciated.

Please see below the code [HTML]

                <table id="datatable" class="display dataTable">
                <thead>
                    <th>Country</th>                            
                    <th>Bank</th>
                    <th>Address</th>
                </thead>
                <tbody>
                </tbody>
            </table>

JavaScript

function searchBanks() {
initSearchTable();
populateBanks();

}

var oBankTable;

function initSearchTable() { oBankTable = $('#datatable').dataTable({ "sAjaxDataProp": "bank", "bPaginate": false, "bFilter": false, "bLengthChange": false, "bInfo": false, "bAutoWidth": false, "bJQueryUI": true, "bDeferRender": true, "aoColumns": [ { "mData": "country", sDefaultContent: "" }, { "mData": "name" , sDefaultContent: ""}, { "mData": "address" , sDefaultContent: ""} ]
}); }

function populateBanks() {

var endClientRequest = $.ajax({
url: "../api/banks",
type: "GET",
dataType: "json"
});
endClientRequest.done(function (response) {
oBankTable.fnClearTable();

for(var i=0; i< response.bank.length ; i++) {
    var tmp_bank = response.bank[i];
    console.log(tmp_bank.country + "**" + tmp_bank.name + "**" +  tmp_bank.city + "**" +  tmp_bank.address + "**" +  tmp_bank.swiftBIC);
    oBankTable.fnAddData(tmp_bank.country, tmp_bank.name, tmp_bank.city, tmp_bank.address, tmp_bank.swiftBIC);
}      

return false;

});
endClientRequest.fail(function (jqXHR, textStatus) {
console.log("request failed");
show_error_dialog("Unable to connect to the server at present to retrieve the detail.");
return false;
});
return false;

}

JSON response

{"banks": [ { "country": "US", "name": "Bank1", "address": "Address 1", }, { "country": "US", "name": "Banks2", "address": "Address 2", } ]}

Thanks a lot for your help.

Best Regards - Roy

allan

Please link to a test case showing the issue, as requested int he forum rules.

Allan