绑定的jQuery数据表给出错误“来自数据源的第0行的请求的未知参数'0'”

Question

i am creating json format for jquery datatable using jquery , but it gives error "DataTables warning (table id = 'tblDynamicModifierItems2'): Requested unknown parameter '0' from the data source for row 0"

my Html is

 <table id="tblDynamicModifierItems" class="tblDynamicModifierItems table table-hover table-nomargin dataTable table-bordered dataTable-scroller dataTable-tools">
                                <tbody></tbody>
                            </table>

my Jquery code is

var aaData = [];
     var ModifierItemCode = "1";
            var Description = "10 cane rum"
            aaData.push({
                "ModifierItemCode": ModifierItemCode,
                "ModifierItem": Description,
                "Delete": "Delete"
            });

     var oTable = $("#tblDynamicModifierItems").dataTable({
                    "aaData": aaData,
                    "aoColumns": [{ "bVisible": false }, { "sTitle": "Description" }, null],

                });
                oTable.fnSort([[1, 'asc']]);

can anyOne help me solve this?

Answer 1

You need to make the markup right. jQuery dataTables is very sensitive to that. It is important to define the headers, <th> , so dataTables have a chance to know how many columns it should expect in each row of data.

<table id="tblDynamicModifierItems" class="tblDynamicModifierItems table table-hover table-nomargin dataTable table-bordered dataTable-scroller dataTable-tools">
    <thead>
       <tr>
           <th>ModifierItemCode</th>
           <th>ModifierItem</th>
           <th>Delete</th>
        </tr>
    </thead>    
    <tbody></tbody>
</table>

Also, you must tell dataTables which part of each aaData item that should correspond to which column :

var oTable = $("#tblDynamicModifierItems").dataTable({
     "aaData": aaData,
     "aoColumns": [
         { mDataProp : "ModifierItemCode" },
         { mDataProp : "ModifierItem" },         
         { mDataProp : "Delete" }
     ]     
});

your code in a demo -> http://jsfiddle.net/s9Lag6mc/

Regarding your "aoColumns": [{ "bVisible": false }, { "sTitle": "Description" }, null], I am not completely sure what you are trying to do, but if you want to hide the first column, just add bVisible: false to the first aoColumns item, and so on.

---

As for your fnCreatedRow problem : Think about it, you are inserting an object. So instead of alert(aData[0]) (or whatever) simply

alert(aData.ModifierItemCode);

forked fiddle -> http://jsfiddle.net/0aLys2d3/