fnDraw() after retrieving and appending html rows to an existing dataTable

david

Hi,

I can't manage having a dataTable refresh using fnDraw() after appending html rows retrieved by Ajax. Here is the concerned piece of code :

[code]jQuery.ajax({
type: "POST",
url: url,
data: data,
success: function(trs) {
// Append retrieved rows
var table = jQuery('#table');
table.append(trs);
// Redraw dataTable
var dataTable = table.dataTable();
dataTable.fnDraw();
}
});[/code]

Is this possible ?
Thanks in advance.

allan

You need to use fnAddData ( http://datatables.net/api#fnAddData ) to add new rows to an exisiting DataTable. However, if the table doesn't already exist, and you create a valid table with the insert, then yes, that should work. Is it being added to the tbody? Remember DataTables needs thead and tbody.

Allan

david

Hi Allan,

Thank you for the answer.

Yes, new rows are well added to the TBODY and follow the empty TR (the one that contains the "dataTables_empty" TD).

However, I should have specify more clearly that, in my case, since rows are retrieved in a raw html format, fnAddData() is not really suitable for my need. I don't want to deal with the data on the client-side because the rows are generated on the server-side (using a form framework).

The only way I see that would do the trick would be to parse the html response and use fnAddData() to regenerate the lines ... Have you perhaps any other more suitable/smarter solution?

allan

I'm afraid there isn't really a better way to do this at the moment. Thinking about it there is good reason to create a plug-in called fnAddHtmlRow which will do exactly what you are looking for. I've added it to my to do list :-)

In the mean time, if you are only adding data to an empty table, you could use the new fnDestroy API function in 1.7 beta and "kill" the old table, which will put the original html back into place, then add your rows, and re-initialise the table. Bit of a round-about method though... The API function would probably be much cleaner.

Regards,
Allan

allan

I was just about to set about writing this API function, but realised that there already was one: http://datatables.net/plug-ins/api#fnAddTr :-). That will retain DOM information etc - basically the same as fnAddData, but it takes a TR element rather than a JS array.

Allan

jed

fnAddTr is great, but it does seem to have some shortcomings. It doesn't handle hidden columns, and (as a result?) the sorting is off by one column, or at least the styling is. Then when clicking a header to sort, the sorting-styled column jumps one column to the left. Am I the only one that has this problem?