Refreshing issue

Bracame

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.

allan

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

Bracame

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.

allan

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

Bracame

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.

allan

Hi Bracame,

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

Allan