fnDraw() after modifying table in jQuery

iceduck

Hello,
Here's my problem, I don't know if anybody knows how to solve it.
My html table is populated upon generation by PHP, something like
[code]


..


<?php foreach ($Variables as $Var) : ?>

<?=$var['name']?>
<?=$var['somethingelse']?>

<?php endforeach ?>


[/code]
When you click on an element, a menu is called in AJAX where you can edit data in a fancy manner. When you click Save, the minimenu displays an OK message and a hidden div containing the data of modified row or the new row if it's the case.
I then inject this row in the table. The row shows up perfectly, but it seems like when I fnDraw after injecting the new data, the new elements aren't taken in account.

I have something like this to redraw :
[code]
<?php if (isset($resultOK) && $resultOK) : ?>

$(document).ready(function(e) {
if ($(".dataTable").length > 0 && oTable)
{
oTable.fnDraw(true);
}
});

[/code]
Injected at the end of the AJAX call if the result is OK.


Thank you for any potential help.

danut007ro

Hello,

It looks like you got into problems like I did. The problem is that your html is actually cleaned. For any custom elements in a cell I wrote a new callback that is called for every cell, but after the cell is actually created, so you can do whatever you like inside that callback.

If you want it, I can post it, it is a very simple modification to the sources of DataTables

allan

> I then inject this row in the table. The row shows up perfectly, but it seems like when I fnDraw after injecting the new data, the new elements aren't taken in account.

You need to use the DataTables API to tell the DataTable that there is a new row - specifically fnAddData . You can't just put a new row into the table using DOM methods since DataTables has absolutely no idea that you've done that - so you need to use the API to tell it what is going on!

Allan

iceduck

Thanks for the answers. I thought by calling fnDraw(), DataTables would refresh his DOM tree and reprocess the html. The advantage with my technique is that if one day they decide to stop using DataTables, the new rows will still show up, if I use the API, it's gonna work as long as DataTables is running.
Plus, when I insert rows, they have extra data (used in AJAX later) like classes, ids and (html5) data-ext.
I would love a function that would simply reprocess the table.

allan

The fnAddTr plug-in might be of interest to you: http://datatables.net/plug-ins/api#fnAddTr .

Allan

iceduck

Thank you Allan. I appreciate your help.
It solves my problem for adding rows.
I'm still stuck with updating rows though.
Some of the rows displays images as icons, no way I can have an AJAX datasource with the variety of data I'm dealing with.

I basically need to be able to Add/Edit/Delete rows without going through DataTables API.
Something like oTable.refreshDom() would have been useful :-)

allan

> I basically need to be able to Add/Edit/Delete rows without going through DataTables API.

You can't not go through the API and still use DataTables I'm afraid, since DataTables must be told what is going on! fnAddData , fnUpdate and fnDeleteRow are the API methods to add, edit and delete.

refreshDom is perfectly possible - you could destroy the table and recreate it with your new data, or an API plug-in could be created that will update the table based on the current information available in the table - I don't have an example of such a plug-in but I don't see why it couldn't be done.

> Some of the rows displays images as icons, no way I can have an AJAX datasource with the variety of data I'm dealing with.

So you are adding data on the client-side (the icons)? Can you just use sDefaultContent for those columns?

Allan