Json response is not binding to jquery datatable

Question

I want to populate the jquery datatable with different set of data based on the request parameter. I am getting the object json response where as i am not able to bind it to data table. It throw error as

DataTables warning: table id=calltable - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

<script>
var table;
var all_data;
    jQuery(document).ready(function($) {
          table = $('#calltable').DataTable({
              "data":all_data,
              bSort: false,
                aoColumns: [ { sWidth: "10%" }, { sWidth: "10%" }, { sWidth: "10%", bSearchable: false, bSortable: false },{ sWidth: "10%" },{ sWidth: "10%" },{ sWidth: "10%" },{ sWidth: "10%" },{ sWidth: "10%" },{ sWidth: "10%" },{ sWidth: "10%" } ],
            "scrollY":        "200px",
            "scrollCollapse": true,
            "info":           true,
            "paging":         true

              });

 $("#search-form").submit(function(event) {      
            searchLOVViaAjax();
        });

function searchLOVViaAjax() {

    var search = {}
    search["lovId"] = "CURRENCY_QUERY_ID";

    $.ajax({
        type : "POST",
        contentType : "application/json",
        url : "${home}search/api/getLOVList",
        data : JSON.stringify(search),
        dataType : 'json',
        timeout : 100000,
        success : function(data) {
            console.log("SUCCESS: ", data);
            display(data);
        },
        error : function(e) {
            console.log("ERROR: ", e);
            display(e);
        },
        done : function(e) {
            console.log("DONE");
            enableSearchButton(true);
        }
    });

}
function display(data) {
        var json = "<h4>Ajax Response s</h4><pre>"
                + JSON.stringify(data, null, 4) + "</pre>";
        $('#feedback').html(json);
        all_data = data;
        table.clear().row.add(all_data).draw();

    }
</script>

My html look like

<div id="LOVID">
    <table id="calltable" class="display" cellspacing="0" width="100%">
    </table>
    <div id="feedback"></div>
</div>

My Json look like i.e data

{
"msg": "",
"code": "200",
"data": [
    {
        "id_Column": "001",
        "columnValue1": "US DOLLAR",
        "columnValue2": "US DOLLAR",
        "columnValue3": "2006-07-17 15:21:58.0",
        "columnValue4": "USD",
        "columnValue5": "US DOLLAR",
        "columnValue6": null,
        "columnValue7": null,
        "columnValue8": null,
        "columnValue9": null,
        "columnValue10": null
    },
    {
        "id_Column": "002",
        "columnValue1": null,
        "columnValue2": null,
        "columnValue3": "2006-07-17 15:24:34.0",
        "columnValue4": "INR",
        "columnValue5": "INDIAN RUPEE",
        "columnValue6": null,
        "columnValue7": null,
        "columnValue8": null,
        "columnValue9": null,
        "columnValue10": null
    },
    {
        "id_Column": "003",
        "columnValue1": null,
        "columnValue2": null,
        "columnValue3": "2006-07-17 15:36:38.0",
        "columnValue4": "JPY",
        "columnValue5": "JAPANESE YEN",
        "columnValue6": null,
        "columnValue7": null,
        "columnValue8": null,
        "columnValue9": null,
        "columnValue10": null
    }    
]

}

I dont know how to push this json values to the datatable tried every thing.

Try to use integer indices for your JSON array instead of strings. — user4035
– user4035, Commented Aug 9, 2016 at 13:24

Rafael Teles · Accepted Answer · 2016-08-09 13:37:41Z

2

If you want to feed the dataTables with a json object (without serverside processing) you can do it like this:

$('#yourTable').DataTable( {
    data: yourJsonObject,
    columns: [
        { data: "id_Column" },
        { data: "columnValue1" },
        { data: "columnValue2" },
        { data: "columnValue3" },
        { data: "columnValue4" },
        { data: "columnValue5" },
        { data: "columnValue6" },
        { data: "columnValue7" },
        { data: "columnValue8" },
        { data: "columnValue9" },
        { data: "columnValue10" },
    ]
} );

In your case "yourJsonObject" should be the "data" array inside your json object. Check out this Nested Object example and this javascript sorced example

answered Aug 9, 2016 at 13:37

Rafael Teles

2,7582 gold badges19 silver badges34 bronze badges

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

5 Comments

hari Over a year ago

I have tried like above, the datatable is displaying empty rows no values is displaying also getting error like DataTables warning: table id=calltable - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see datatables.net/tn/4

hari Over a year ago

$('#calltable').DataTable( { 			    data: data.data, 			    columns: [ 			        { title: "id_Column" }, 			        { title: "columnValue1" }, 			        { title: "columnValue2" }, 			        { title: "columnValue3" }, 			        { title: "columnValue4" }, 			        { title: "columnValue5" }, 			        { title: "columnValue6" }, 			        { title: "columnValue7" }, 			        { title: "columnValue8" }, 			        { title: "columnValue9" }, 			        { title: "columnValue10" }, 			    ] 			} );

Rafael Teles Over a year ago

Hi @hari in the the code you posted in the comment you are setting the column title, but you are suppose to set the "data" value ...

hari Over a year ago

Below code works for me now when i try today after trying with other work arounds, thanks @Rafael Teles

table = $('#calltable').DataTable({ 			"bDestroy" : true, 			data : data.data, 			columns : [ { 				data : "id_Column", 				title : "id_Column" 			}, { 				data : "columnValue1", 				title : "columnValue1" 			}, { 				data : "columnValue2", 				title : "columnValue2" 			}, { 				data : "columnValue3", 				title : "columnValue3" 			} ] 		});

Muflix Over a year ago

What if there is an integer value ? It will not map ! :/

Collectives™ on Stack Overflow

Json response is not binding to jquery datatable

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related