Button coding returned from Ajax is not working after fnClearTable+fnAddData

yam1234

Hi all,
I am using the data tables to read the content by AjaxSource where form button and the related jQuery script is included. I found that the button inside the table works well if the table is initialized, but the button is not responsive after the table updating by the combination of Table.fnClearTable(0) and Table.fnAddData([[r1 r2 r3]]).
I have tried to grep the resulting JSON message, but the returned html and script of the button should be correct.
Any idea? Thank you.

Yam

The sample coding is listed below for reference:

[Table initialization:]
var Table = $("#example").dataTable({
"bJQueryUI":true,
"sPaginationType": "full_numbers",
"bStateSave":true,
"bProcessing":true,
"bServerSide": false,
"sAjaxSource": "getContent.php",
"bFilter":true,
"bAutoWidth":false
});


[getContent.php:]
$content = "Button".
"$('#b1').click(function(){ alert('successful'); });";
echo $content;


[Table update:]
$.ajax({
"url":"getContent.php",
"dataType":"json",
"data":{nbRandom: Math.random()},
"type":"POST",
"success": function(data){
Table.fnClearTable(0);
Table.fnDraw();
$.each(data.aaData, function(i,r){
Table.fnAddData( [r[0]] );
});
Table.fnDraw();
}
});

allan

You have server-side processing enabled - so there is no need to call fnClearTable etc. When server-side processing is enabled, every draw (paging, filter whatever) will clear the table and redraw it - since all the data is stored on the server-side.

So is your server-side processing doing something like this: http://datatables.net/examples/data_sources/server_side.html (poke around with Firebug for the XHR formatting that is being used live).

Allan

yam1234

Allan,

Thanks for your reply, my server side processing is doing exactly the things in your URL. However, the database will be real time updated. Thus, I have to setup a mechanism to refresh the table continuously after a period of time.
However, I don't know which function I can use to retrieve the data from DB again and redrew into the table.

Yam

allan

fnDraw ( http://datatables.net/api#fnDraw ) will effectively refresh the table from the server, thus updating it.

Allan

yam1234

Allan,

I have followed the api page to trigger the fnDraw(), however, it has done nothing to update the table. I have to manually refresh the whole page to get the updated data if I just use fnDraw() instead of removing and adding again the whole table.
Furthermore, my table parameter "bServerSide" is now set to "false". I found that the data will never display on the table if it set to "true". I don't know why but this is happened in my case. Thank you.

Yam

allan

Its sounds like you might need to understand the difference between server-side processing and client-side processing a bit clearer: http://datatables.net/usage/#data_sources . Also worth poking around the examples.

- Refreshing the table, server-side processing - fnDraw will refresh the table (look at Firebug and you will see the XHR for the refresh)
- Refreshing the table, client-side processing - fnReloadAjax will do the trick: http://datatables.net/plug-ins/api#fnReloadAjax

Allan

yam1234

Allan,

Thanks for your explanation. Indeed, I have tried both methods following your web instructions. However, it seems as if only the client-side processing works in my case. The server-side processing was failed in my last post on 26 Feb 2010 "How to use dataTable with server processing data".
My code is similar to the server-side processing example, but nothing show within the dataTable.

And now, as you mention, I am using client-side processing to retrieve the data by Ajax and manipulating the table content by fnClearTable() and fnAddData() functions. I have tried out fnReloadAjax() but it prompted out the following message:
Message: Object doesn't support this property or method

Yam