Refreshing table without AJAX

devpriya

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

allan

What you've got looks like exactly what I would suggest. You shouldn't need the fnDraw though since fnAddData will do that by default.

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

devpriya

No, sadly I don't see any error messages on the error console.

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]

devpriya

I tried an alternate approach, I thought of nuking the table every time I refresh the data and create a new one from scratch.

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]