Error using jQuery datatable

Question

I am 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.

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

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",
    }
]}

Ariel · Accepted Answer · 2014-12-15 13:07:24Z

1

You may need to remove the "," after the address tag.

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

you can validate json in http://jsonlint.com/

answered Dec 15, 2014 at 13:07

Ariel

1,4368 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error using jQuery datatable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related