Adding a row via html

awbirkner

I want to add a new row to my datatable after I receive some values from a form on my page.

The row is stored in a variable
var row = "" + $("#name").attr("value") + "" + $("#jqDom success updated").html() + "Edit Delete"

Then I'm trying to apend it using:

$(row).appendTo("#manClone tbody");

After I add it, if I use any sorting functions it disappears. Does anyone know how to add a row using the full html rather than the td values?

allan

Hi awbirkner,

The way to add data to a DataTables table is through the fnAddData() API function. The method you have used above won't work as DataTables doesn't know anything about that data (it will in fact remove your new row on the next redraw).

It would appear that you have the individual column information already, so can you do something like:

oTable.fnAddData( [ $("#name").attr("value"), $("#jqDom success updated").html(), "Edit Delete" ] );

The problem I see with this is that you would loose the class names on each cell, unless you use the fnDrawCallback function to update that row.

Perhaps what is needed is an API function that allows an already constructed node to be added to the table. This should be possible through a plug-in API function... Now on the to do list....

Allan

awbirkner

Thanks for the reply Allan

That all seems to concur with my testing so atleast I know I'm not missing anything. I think a plugin to add a full row would be a great addition in terms of styling and hooking in other dynamic jquery options.

allan

Hi awbirkner,

I've just added a plug-in API function called fnAddTr() which does what you are looking for: http://datatables.net/plug-ins#api_fnAddTr

One thing to note is that it doesn't take account of hidden columns. If this is desired, it's best just to hack around with the plug-in code :-)

Allan

awbirkner

Awesome update, thank you!

dgm

I know this is an old thread, but I'm trying to hack the plugin to handle filters and hidden columns ... I fixed the filters with:

[code]
this.fnUpdate(aData, iIndex);
[/code]

right after the row has been replaced. But the strange part happens when I try to work with the hidden attribute. I was thinking to loop through the column settings and re-assert the settings like:

[code]
for ( var i=0 ; i

dgm

lol, disregard, I had this fixed previously in another file that was included, and the syntax error made it revert to the working version!