Refreshing table without AJAX
Refreshing table without AJAX
devpriya
Posts: 8Questions: 0Answers: 0
Hi Allan,
I need to clear the table's data, repopulate it with a JSON object array and then re-draw it. I am using JSF and thats why I cannot generate directly consumable JSON (It always generates the JSON inside a valid html page). So I load the page into a temporary div using $.load() and then I fetch the data from the div and create a JSON object and pass this object to dataTables.
For first time initialization this works perfectly fine.
For refreshing the data, I do the following but the table vanishes and then nothing get drawn.
[code]
oTable.fnClearTable(false);
oTable.fnAddData(data);
oTable.fnDraw();
[/code]
I have renderers defined for all columns like this -
[code]
"sTitle":"Pass Percentage",
"mDataProp":"passPercent",
"sClass":"pass-percent",
"fnRender": function(obj){..........}
[/code]
Do these fnRender() kick in for fnAddData()/fnDraw() too?
Please suggest me the best practice for refreshing the table in non-AJAX mode.
Thanks
I need to clear the table's data, repopulate it with a JSON object array and then re-draw it. I am using JSF and thats why I cannot generate directly consumable JSON (It always generates the JSON inside a valid html page). So I load the page into a temporary div using $.load() and then I fetch the data from the div and create a JSON object and pass this object to dataTables.
For first time initialization this works perfectly fine.
For refreshing the data, I do the following but the table vanishes and then nothing get drawn.
[code]
oTable.fnClearTable(false);
oTable.fnAddData(data);
oTable.fnDraw();
[/code]
I have renderers defined for all columns like this -
[code]
"sTitle":"Pass Percentage",
"mDataProp":"passPercent",
"sClass":"pass-percent",
"fnRender": function(obj){..........}
[/code]
Do these fnRender() kick in for fnAddData()/fnDraw() too?
Please suggest me the best practice for refreshing the table in non-AJAX mode.
Thanks
This discussion has been closed.
Replies
Are you getting any Javascript errors on the console?
> Do these fnRender() kick in for fnAddData()/fnDraw() too?
fnAddData yes - fnDraw no. fnRender is called only once per cell, and that is when DataTables registers it (or if it gets updated using fnUpdate).
Allan
Moreover, I wrote the following sample code which is kind of a smaller version of what I am doing actually and tried it in JSBin, it seems to work but JSBin immediately crashes after rendering the table!
http://live.datatables.net/ubewuw/edit#source
[code]
var myTable;
$(document).ready(function() {
var data = [];
var dataObj = {};
dataObj.pass = "80";
data.push(dataObj);
dataObj = {};
dataObj.pass = "75";
data.push(dataObj);
myTable = $('#example').dataTable({
"bDestroy": true,
"bDeferRender": true,
"bStateSave": true,
"aaData": data,
"aoColumns": [
{
"sTitle":"Pass Percentage",
"mDataProp":"passPercent",
"sClass":"pass-percent",
"fnRender": function(obj){
var htmlStr = "Pass Percentage is : " + obj.aData.pass + "%";
return htmlStr;
}
}
]
});
$("#refresh").click(function(){
data[0].pass="100";
myTable.fnClearTable();
myTable.fnAddData(data);
myTable.fnDraw();
});
});
[/code]
There are two scenarios here,
1) If I don't alter the table data at all, then refresh works fine.
2) If I modify a column's data and then do a refresh I see an error message in the error console saying "$('#myTable').dataTables is not a function".
For modifying the column data, this is what I do -
[code]
var $trNode = $(obj).parent().parent(); // obj is a button inside the td
var aData = myTable.fnGetData(obj.parentNode.parentNode);
var htmlStr = "Cancelled";
aData.status = htmlStr;
$trNode.find("td:nth-child(3)").html(htmlStr);
[/code]