Adding row attributes after fnAddData?

Adding row attributes after fnAddData?

ZerxerZerxer Posts: 13Questions: 0Answers: 0
edited June 2010 in General
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.

Replies

  • RazputinRazputin Posts: 4Questions: 0Answers: 0
    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
  • allanallan Posts: 50,047Questions: 1Answers: 7,403 Site admin
    edited June 2010
    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
  • ZerxerZerxer Posts: 13Questions: 0Answers: 0
    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.
  • RazputinRazputin Posts: 4Questions: 0Answers: 0
    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 :)
  • RazputinRazputin Posts: 4Questions: 0Answers: 0
    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
  • ZerxerZerxer Posts: 13Questions: 0Answers: 0
    fnDraw() @ Razputin

    http://datatables.net/api
  • ZerxerZerxer Posts: 13Questions: 0Answers: 0
    Actually, you should maybe just look into fnUpdate() instead, which lets you update the row's data and then will redraw it for you.
  • ZerxerZerxer Posts: 13Questions: 0Answers: 0
    Hey Allan, could I just do this? oTable.fnSettings().aoData[0].nTr.id = 'the_id_I_want' ?
  • allanallan Posts: 50,047Questions: 1Answers: 7,403 Site admin
    @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
  • allanallan Posts: 50,047Questions: 1Answers: 7,403 Site admin
    @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
  • ZerxerZerxer Posts: 13Questions: 0Answers: 0
    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.
  • RazputinRazputin Posts: 4Questions: 0Answers: 0
    that worked great, thanks for the help
  • ZerxerZerxer Posts: 13Questions: 0Answers: 0
    edited June 2010
    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.
  • allanallan Posts: 50,047Questions: 1Answers: 7,403 Site admin
    edited June 2010
    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
  • kkudikkudi Posts: 77Questions: 0Answers: 0
    edited June 2010
    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.
  • ZerxerZerxer Posts: 13Questions: 0Answers: 0
    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.
This discussion has been closed.