JSON numeric column causing fnAddRow failure [SOLVED]

limitless

I have a datatable setup where I am bringing in JSON data using the $.ajax jQuery method and then passing that data into the datatables object. The loading and rendering of the data works well, however adding a new row dynamically using the fnAddRow method is failing.

This is my JSON data (validated with jsonlint):
[code]
{
"Result": true,
"DataSet": [
{
"ItemId": "1",
"ItemName": "The Thing",
"Address": "236 Bourke Street",
"Suburb": "Melbourne",
"City": "Melbourne",
"CountryName": "Australia",
"StateName": "Queensland",
"Postcode": "3001",
"ContactName": "Harrison Ford",
"ContactNumber": "(02) 8872 2445"
}
],
"HttpCode": 200,
"Message": ""
}
[/code]

And here is the code in which I initialise the datatables object:
[code]
$.ajax({
type: 'GET',
url: "table_test.txt",
dataType: "json",
context: document.body,
success: function(arJSON){
if(arJSON.Result == true)
{
objTable = $('#tblStores').dataTable( {
"bProcessing": true,
"bJQueryUI": true,
"aaData": arJSON.DataSet,
"aoColumns": [
{ "mDataProp": "ItemId", "bSearchable": false, "bVisible": true },
{ "mDataProp": "ItemName" },
{ "mDataProp": "Address" },
{ "mDataProp": "Suburb" },
{ "mDataProp": "City" },
{ "mDataProp": "CountryName", "bSearchable": true, "bVisible": true },
{ "mDataProp": "StateName", "bSearchable": true, "bVisible": true },
{ "mDataProp": "Postcode" },
{ "mDataProp": "ContactName", "bSearchable": false, "bVisible": true },
{ "mDataProp": "ContactNumber", "bSearchable": false, "bVisible": true }
]
});
}
else
{
alert("Unfortunately there has been an error fetching the data for this page.");
}
},
error: function(xhr, ajaxOptions, thrownError){
alert(xhr.responseText);
}
});
[/code]

This is the code block attached to a button which tries to add a new row:
[code]
/* I'm just trying to add a new row, but the first column fails, perhaps because it's numeric??? */
$("#btnTest").click(function(){
var arAddData = [
40,
"aaa",
"aaa",
"aaa",
"aaa",
"Australia",
"Victoria",
"3000",
"aaa",
"aaa"
];
objTable.fnAddData(arAddData);
});
[/code]

Clicking on this button brings up the error:
[quote]
DataTables warning (table id = 'tblStores'): Requested unknown parameter 'ItemId' from the data source for row 1
[/quote]

From what I can gather with Firebug, the following line in datatables.js on line 6593 returns an undefined when trying to determine the data type of this ItemId column and displays the error:
[code]
6593: if ( (sData=oCol.fnGetData( oData )) === undefined )
[/code]

Specifically, this function "fnGetData" is called to determine the data type of the column and seems to fail every logic test, including whether the parameter is a string (which it is: "ItemId"), and simply tries to return the new data element from the array of row data by trying to reference it with this string:
[code]
6690: return data[mSource];
[/code]

Which fails completely because the new row data array is not an associative array.

Does anyone have any ideas whether this is a bug in my code or datatables? I can't seem to figure out either way which it is.

Thanks.

allan

Hi limitless,

The problem you face here is that you are using the mDataProp option to tell DataTables what property it should read from the source data object for each column (nice use of it btw :-) ), which is obviously working well for the object you send back by Ajax, but then instead of giving DataTables the same object structure you are giving it an array of data, which is it rejecting. The reason it is rejecting it is that it doesn't have the properties that you have told DataTables to read for each column.

So rather than passing in an array for fnAddData, in this case you need to pass in an object with the same structure as you have defined using mDataProp and the Ajax return.

Regards,
Allan

limitless

That was it! I passed the following object into fnAddRow to make it work:

[code]
var arAddData = {
"ItemId": "B",
"ItemName": "aaa",
"Address": "aaa",
"Suburb": "aaa",
"City": "aaa",
"CountryName": "Australia",
"StateName": "Victoria",
"Postcode": "3000",
"ContactName": "aaa",
"ContactNumber": "aaa"
};
[/code]

Thanks Allan! Much appreciated mate ;)

dlicorish

Hey Allan,

I think the docs on fnAddData need to be updated to reflect that it can now accept an object as well as an array. Maybe docs for other methods that are affected by the mDataProp changes (BTW, nice!!!) need attention, too.

Thanks,
David

allan

Hi David,

Very good point. I've just updated fnAddData and fnUpdate to take account of the changes in 1.8. Thanks for the reminder!

Regards,
Allan

BobR

Is there really such a thing as fnAddRow? Seems that fnAddData is the way to get a row added to the table.

kaushal91

i am having a similar problem
i am using fnDeleteRow to delete row and it returns a row in result which is deleted.
well if i try to add the same row using fnAddData it gives the error

DataTables warning (table id = 'tab1'): Requested unknown parameter 'Id' from the data source for row 1

allan

You need to give us a link to the page so we stand a chance of offering some help. See - http://datatables.net/forums/discussion/9719/how-to-ask-for-help

Allan

kaushal91

well my problem was solved using

var oTable = $('#TableID').dataTable();
var delrow = oTable.fnDeleteRow(index);
oTable.fnAddData(delrow._aData);

the data was in ._aData


by the way i will provide sufficient information next time..
Thanx allan