Refreshing issue

Refreshing issue

BracameBracame Posts: 3Questions: 0Answers: 0
edited July 2009 in General
Good evening to all and great tool even though i am stil a newbie.

My issue is about a refreshing problem. I have a table that is displayed at startup. When I click a selectbox nearby, i change the database and i want my table to be updated with this other data source.
When I do that, datas are correctly updated, BUT, the previous items such as 'search', 'entries' etc of the previous table remains. So, I have 2 'search' and 'entries' etc ...
If I click a third time, there is a third 'search' item and so on ....
The numbers of columns i want to display is not the same, so i make no use of the json component.

Here is the relevant pieces of my code :
1 -
[code]
$.ajax({
type: "GET",
url: "ajax.php?fnc=getLines&typePOI="+typePOI,
success: function(msg){
$("#tableResult").html(msg);
$('#tableResult').dataTable({
"bStateSave": true
});
}
});
[/code]

2 -
[code]
$html = array();
$elementId = 0;


$tableHtml = array();
$tableHtml['id'] = 'tableResult';
$tableHtml['class'] = 'display';

foreach ($DATA['COL_NUMBERS_TO_DISPLAY'][$typePOI] as $k => $v) {
$tableHtml['headers'][] = $v;
}

while ($row = $stmt->fetch())
{
$tableHtml['rows'][] = $row;
}

$html[$elementId++]['table'] = $tableHtml;
return $html;
[/code]
3 -
[code]
function refreshLines()
{
var typePOI = document.import.typePOI.value;

$.ajax({
type: "GET",
url: "ajax.php?fnc=getLines&typePOI="+typePOI,
success: function(msg){
$("#tableResult").html(msg);
$('#tableResult').dataTable({
"bStateSave": true
});
}
});
}
[/code]
At startup, jscript code in 1 executes.
Data is fetched by 2. (php code)
When i change value in the select box, code 3 executes. (and 2 again, with differents parameters)

Datas are correctly updated, as well as number of columns displayed.
BUT, i don't know how to tell datatables to remove all dynamically generated html related to the previous datas...

Thank you in advance

Bracame.

Replies

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Hi Bracame,

    Have a look at the fnReloadAjax() plug-in API function - http://datatables.net/plug-ins#api_fnReloadAjax . With this you can reload the data from a different source for your table without needing to re-initialise your table.

    Regards,
    Allan
  • BracameBracame Posts: 3Questions: 0Answers: 0
    Good morning allan,
    I do not use any oTable object because i make no use of json since I have a dynamic number of headers displayed.
    So i cannot use the oTable.fnReloadAjax() syntax

    I if add : oTable = $('#tableResult').dataTable({
    "bStateSave": true
    }); in -1-

    and if my refreshLines() function is only : (instead of -3-)
    oTable.fnReloadAjax("ajax.php?fnc=getLines&typePOI="+typePOI);

    => i've got 'no matching records found' displayed, because numbers of columns has not been updated on the page , but columns fetched by php is not the same (because i grab them from another source database).

    Bracame.
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Hi Bracame,

    Yup you are quite right - this method wouldn't work with a varying number of columns. To cope with that situation your can do something such as described in this post: http://datatables.net/forums/comments.php?DiscussionID=398#Item_2 . Basically just nuke your old table completely and then draw a new one.

    Regards,
    Allan
  • BracameBracame Posts: 3Questions: 0Answers: 0
    Hello again, I did basically that : refresh the DOM.

    I noticed that each time i refreshed my table, there was a new div called xxx_wrapper that included himself in the previous div called xxx_wrapper. So that is why, search box came multiple times ...

    So, my code is the same now, except I added a javascript refreshing dom method :

    [code]
    function refreshDivWrapper(idTable)
    {
    divBODY = document.getElementById("body");
    divWRAPPER = document.getElementById(idTable+"_wrapper");
    divBODY.removeChild(divWRAPPER);


    // get the reference for the body
    var body = document.getElementsByTagName("body")[0];

    // creates a element and a , element
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");
    var tblHead = document.createElement("thead");

    var row = document.createElement("tr");

    tblHead.appendChild(row);
    tbl.appendChild(tblHead);

    // put the in the
    tbl.appendChild(tblBody);
    // appends into
    body.appendChild(tbl);

    tbl.setAttribute("id", idTable);
    tbl.setAttribute("class", "display");
    }
    [/code]

    And now, it rocks :)

    Thanks

    Bracame.
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Hi Bracame,

    Yup - look ideal. Nice one and thanks for sharing your code.

    Allan
This discussion has been closed.