Button coding returned from Ajax is not working after fnClearTable+fnAddData
Button coding returned from Ajax is not working after fnClearTable+fnAddData
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();
}
});
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();
}
});
This discussion has been closed.
Replies
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
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
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
- 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
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