Refreshing table without AJAX

Refreshing table without AJAX

devpriyadevpriya Posts: 8Questions: 0Answers: 0
edited December 2011 in DataTables 1.8
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

Replies

  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin
    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
  • devpriyadevpriya Posts: 8Questions: 0Answers: 0
    edited December 2011
    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]
  • devpriyadevpriya Posts: 8Questions: 0Answers: 0
    edited December 2011
    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]
This discussion has been closed.