Dynamically add new row initialized with aoColumns (server-side) is not adding

anderson

Hi,

I would like to add rows into my datatables initialized using server-side data (json) with ajax call:

var productsTable = $('#productsTable').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/myurl/data",
"aoColumns": [
{ "mDataProp": "id", "bVisible": false, "bSearchable": false, "sName":"myId" },
{ "mDataProp": "count" },
{ "mDataProp": "product.code" },
{ "mDataProp": "product.design" },
{ "sTitle": "", "bSortable": false, "bSearchable": false,
"fnRender": function(obj) {
var id = obj.aData['id'];
var actions = "View";

return actions;
}
}
]
} );

The server-side generates the following json:
{"iTotalDisplayRecords":1,"iTotalRecords":1,"aaData":[{"id":1,"count":10,"product":{"code":"myuniquecode","design":"newgen"}}]}

This works perfectly fine, but how do I add rows to this table using fnAddData? I tried the following code that should add a row when a button is clicked:

$("#clickme").click(function() {
$.getJSON("/myurl/data2", function(json){
productsTable.fnAddData(json.aaData);
});
});

The json generated when $.getJSON is called is just as the same:
{"iTotalDisplayRecords":1,"iTotalRecords":1,"aaData":[{"id":2,"count":20,"product":{"code":"myuniquecode2","design":"newgen"}}]}

But it is not added to the table. I see the "Loading" notice for a millisecond when I click the "Add Button" so I know that table reloads, but the same data remains and nothing is added. What could I be doing wrong?

Thank you in advance! Ü

allan

fnAddData can be a little quirky with server-side processing. The key thing to remember here is that when you are using server-side processing, DataTables does not store data, it doesn't do any sorting or filter or anything - it is simply a display and events handler for data which is coming from the server.

With fnAddData, it has no concept at all of what your server-side process is (i.e. if you have an SQL db, what it's schema is etc), so it can't actually add a row to your data source for you. fnAddData, along with the other API methods, works on the client-side - and since there is no data source on the client-side it can't be persistent. So as soon as you redraw the table (which fnAddData does automatically) the changes are "gone" (again, since the data is being loaded from the server and it doesn't know that you have added a row).

So what you need to do is add a row to the data source and then simply redraw the table to get the new data.

Allan

anderson

Hwaw! What an amazing explanation! That is very good! I want to commend you for your work and your quick responses to everyone's concern! I am completely satisfied with this and will recommend it to more people (which hopefully will generate donations so you can keep making this world a better place!!!) Ü

allan

Thanks for much :-). Glad I could help!

Regards,
Allan