DataTables warning (table id = 'example'): Requested unknown parameter '0' from the data source for row 0

Question

i am very new to javascript and jquery and using data table to show server data. i am using below code.

    $(document).ready(function () {
     $("#example").dataTable({
         "bProcessing": true,
         "sAjaxSource": "/admin/vskuStatusUid?uploadId=" + $('#UID').val(),
         "aoColumns": [{
             "mData": "uid"
         }, {
             "mData": "vcode"
         }, {
             "mData": "vsku"
         }, {
             "mData": "timeStamp"
         }, {
             "mData": "state"
         }, {
             "mData": "counter"
         }]
     });
 });

and my ajax response looks like below 

{
    "aaData": [
        {
            "uid": "UID0000007017",
            "vcode": "927ead",
            "vsku": "Prateek1000",
            "timeStamp": 1391158258658,
            "state": "VENDOR_PRODUCT_PERSISTENCE_COMPLETED",
            "counter": 2
        },
        {
            "uid": "UID0000007017",
            "vcode": "927ead",
            "vsku": "Prateek5000",
            "timeStamp": 1391158258881,
            "state": "VENDOR_PRODUCT_PERSISTENCE_COMPLETED",
            "counter": 3
        }
    ]
}

and my hmtl code is below

<table id="example">
        <thead>
            <tr>
            <th>Upload Id</th>
            <th >Vcode</th>
            <th>Vsku</th>
            <th>Timestamp</th>
            <th>State</th>
            <th>counter</th>
            </tr>
          </thead>
          <tbody>
        </tbody>
        </table>

can someone help me out here.

i have checked other answer related to this question and mostly all were indicating the problem might be difference in thead total column and mdata.

Answer 1

you dont need to write the columns in the html, dataTable does it for you. the only html you need is <table id="example"></table>

i think there error is the you insert data partially or trying to get data from unexisted row in the table.

here is a possible fix :

after you grab the data you got and parse it to object. you can do something like this:

var table = $("#example").dataTable({
         "bProcessing": true,
         "sAjaxSource": "/admin/vskuStatusUid?uploadId=" + $('#UID').val(),
         "aoColumns": [{
             "mData": "uid"
         }, {
             "mData": "vcode"
         }, {
             "mData": "vsku"
         }, {
             "mData": "timeStamp"
         }, {
             "mData": "state"
         }, {
             "mData": "counter"
         }]
     });

for (var i=0; i< ParsedObject.length; i++) {
    var temp_item = ParsedObject[i]; //new row data
    table.fnAddData(temp_item.uid, temp_item.vcode, temp_item.vsku, temp_item.timeStamp, temp_item.state, temp_item.counter); //adds new row to datatable
}