Adding row attributes after fnAddData?

Zerxer

Is there any easy way to add attributes to a row newly added with fnAddData? I'd like each row to have a unique ID. Originally, I've just been adding the row HTML myself manually into the DOM. But this obviously doesn't get added to DataTables then which makes that row disappear from the page once you sort/change pages/filter.

So is there any way to add an ID to my new rows with or after fnAddData? Or a way to make DataTables pick up a new row added with jQuery's basic .append()?

Thanks.

Razputin

I'm fairly new to dataTables so take my advice with a grain of salt... What I did was add a row with oTable.fnAddData and in my data I have a column marked as "bVisible":false which I use as an Id and then i find the row with
[code]
function getRowData(p_id)
{
var settings = oTable.fnSettings();
for (var i=0; i

allan

Hi guys,

fnAddData returns an array of indexes which point to the data storage point in the aoData object where DataTables stores the row which has just been added.

So for example:

[code]
/* assume we have an array of data called 'a' that we want to add to a table 'oTable' */
var ai = oTable.fnAddData( a );
var n = oTable.fnSettings().aoData[ ai[0] ].nTr;
/* n is now the TR that you added - so it can be modified */
[/code]
Not the most gorgeous code in the world - but does the trick :-). I plan to write a plug-in API function in the near future which will take an existing TR node (perhaps one which you have constructed using DOM methods) and be able to add that. This would retain the ID etc - but until then - this extra line will give you the node you added :-)

Regards,
Allan

Zerxer

What could I then do with that node, though? I don't need the node right after adding it, but rather later on. I'm sure I can't just take the node and add an ID to it using .attr() since DataTables wouldn't retain it.

Hmm, I'll have to think something up. Thanks for the response.

Razputin

I'll try not not to hijack this thread hehe but once I change data in n how do I get the render for that row to run again? I have several defined fnRender and I would like that tr to render again with the new data I put in. Side comment data tables is amazing, great work :)

Razputin

zerxer, my case is exactly the same, I alter either rows at other points in time, that's why i made that find function, so whenever I need to alter a row I find the data with that... just not sure how to make it render that afterwards

Zerxer

fnDraw() @ Razputin

http://datatables.net/api

Zerxer

Actually, you should maybe just look into fnUpdate() instead, which lets you update the row's data and then will redraw it for you.

Zerxer

Hey Allan, could I just do this? oTable.fnSettings().aoData[0].nTr.id = 'the_id_I_want' ?

allan

@Zerxer: Once you have 'n' you can do n.setAttribute('id', 'whatever_id_you_want'); to set the ID. Is that what you were looking to do? Perhaps you could explain a little more about why you want to set an attribute, and what you plan to do with it. DataTables is 100% non-destructive with the DOM (unless you are using server-side processing, it which case it is out of necessity!) so if you set an attribute, it will start with that node.

@Razputin: Yup to update a row or cell, you need to use fnUpdate() - that way filtering and sorting will take the change into account.

Allan

allan

@Zerxer: Oops - yeah - I forgot to include 'nTr'. Yes absolutely - if that is what you want then you can do that.

One thing to remember is that DataTables removes nodes from the DOM when they are not on display (ie. if pagination is enabled). As such, if you add a row with an id of 'allan' and it isn't displayed on that page, you couldn't do 'document.getElementById('allan')! You would need to use fnGetNodes() which gets all nodes, and filter them down. $('#allan', oTable.fnGetNodes()); would do it.

Allan

Zerxer

Basically, and I realize this is a bad way to even go about it (I didn't notice at first that using append was making them get lost in DataTables) but I've been doing this for awhile and have this method in many places to be able to update them all with a new method, I have an 'Edit' link at the end of each row which triggers an Edit function, passing that row's ID (which is usually something like "row_[an auto-increment value from the database's row]"). That function then stores that ID in a variable and triggers a jQuery dialog for editing the row. Upon saving, an AJAX call is made, and when I receive the return data indicating it succeeded, I grab that row and use fnUpdate.

And yeah, that's why I realize now that it's a bad way to even do it (because of the row not being on display). But thanks for that fnGetNodes suggestion, I'll definitely try that too! Easy enough updates.

Razputin

that worked great, thanks for the help

Zerxer

Actually, Allan, because of how $('selector', 'scope') works, that line isn't what we'd want. That looks for child elements in 'scope' that match that. This line will do it: $(oTable.fnGetNodes()).not('#allan');

EDIT: Err, disregard that. ".not()" is obviously not what we want either, as that would remove #allan.

allan

How about $(oTable.fnGetNodes()).filter('#allan') : http://api.jquery.com/filter/

I've been wondering about how sensible it would be to integrate some kind of selector into DataTables to allow for this kind of thing a little easier. Something that I'll look at...

Allan

kkudi

you need to do $(oTable.fnGetNodes()).filter('#'+id)[0] to have a fully functional piece of code

provided that the id is unique I guess, which should be if we're following W3 guidelines.

Zerxer

Allan already gave that line of code right above you, minus pulling the DOM node from the jQuery object, which I didn't want anyways. But thanks.