Dynamic Table w/ ajax updates. Trying to convert to datatables.
Dynamic Table w/ ajax updates. Trying to convert to datatables.
I have a table now that gets updates via a get.JSON call. The ajax page returns a JSON array with a table row id and html for each row. On the table page I take this json and remove or update the dom. I do this like so:
[code]
jQuery.each(data, function(id,rows) {
if (rows == 'delete') {
$("#" + id + "").remove();
} else if ( $("#" + id + "").length > 0) {
$("#" + id).replaceWith(rows);
} else {
$("#results_table tbody").prepend(rows);
}
});
[/code]
Reading more about datatables this just won't work well at all. However there are a lot of classes and other stuff in each rows that I don't want to break down. Furthermore the columns may be different for each user and it could get messy trying to figure out how to align each column from the ajax request to the original(seems to be the way DT wants to do it). I tried trying to call a redraw after I update the table but it just simply doesn't work(oTable.fnDraw(true);). I think this maybe that i'm modifying the underlying dom element and DT doesn't like that. However If I manually click the columns it does redraw properly.
I call the above code with SetInterval so the table stays live, so it gets updates every minute or so.
So I've resorted to calling fnDestroy before my ajax call and then recalling datatables back. This does work, but it seems very inefficient and it can hang the browser a little bit while it draws.
Can anyone help me with what my options are? Can I get redraw to work without destroying the table? Is there a way to just bring in the html from my ajax request rather than column by column?
[code]
jQuery.each(data, function(id,rows) {
if (rows == 'delete') {
$("#" + id + "").remove();
} else if ( $("#" + id + "").length > 0) {
$("#" + id).replaceWith(rows);
} else {
$("#results_table tbody").prepend(rows);
}
});
[/code]
Reading more about datatables this just won't work well at all. However there are a lot of classes and other stuff in each rows that I don't want to break down. Furthermore the columns may be different for each user and it could get messy trying to figure out how to align each column from the ajax request to the original(seems to be the way DT wants to do it). I tried trying to call a redraw after I update the table but it just simply doesn't work(oTable.fnDraw(true);). I think this maybe that i'm modifying the underlying dom element and DT doesn't like that. However If I manually click the columns it does redraw properly.
I call the above code with SetInterval so the table stays live, so it gets updates every minute or so.
So I've resorted to calling fnDestroy before my ajax call and then recalling datatables back. This does work, but it seems very inefficient and it can hang the browser a little bit while it draws.
Can anyone help me with what my options are? Can I get redraw to work without destroying the table? Is there a way to just bring in the html from my ajax request rather than column by column?
This discussion has been closed.