integration with jExpand or similar?

integration with jExpand or similar?

LeadVisionaryLeadVisionary Posts: 8Questions: 0Answers: 0
edited August 2010 in Plug-ins
I'm trying to achieve jExpand (http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx) functionality within DataTables. A user on http://www.noupe.com/javascript/jquery-html-table-toolbox.html suggested that DataTables provides this functionality through accordion, but that may have been a mistype as I do not find any documentation on this. Has anyone tried to integrate jExpand with datatables? Would anyone have some insight how to go about doing so?

I imagine you would have to add new rows similar to http://datatables.net/examples/api/add_row.html
but not sure where to go from there. (haven't dived deep though, as I'm on a tight schedule)

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    DataTables has support for this kind of thing built in: http://datatables.net/examples/api/row_details.html

    Allan
  • jimbob72jimbob72 Posts: 49Questions: 0Answers: 0
    edited April 2011
    Is it possible to add some animation to the expand row - perhaps JQuery slideDown? Ideally I'd like the expanded row to expand down smoothly rather than just appear instantly.

    I imagine this needs to be added to the oTable.fnOpen function somewhere, but not sure where...
    [code].slideDown('slow', function() {... });[/code]

    Ps.donated - but forgot to add thread number...
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    It certainly is possible - I've done it a couple of times myself, although not in public code yet (it's on the to-do list...). Basically what I tend to do is have the table cell which is added have 0 margin and padding (so it can go to 0 height), and then put in a DIV element which it's easy to control the height of. You could make it have a class which has 0 height initially and then slide it to whatever height you want. So the 'trick' (such as it is) it not to modify fnOpen, but rather have the HTML that you pass to fnOpen for insertion into the cell be aware of what you want to do (you control it after all!) and then do the required animation after the fnOpen call is finished (fnOpen returns the new TR element, so you've got an easy route to the new elements).

    Regards,
    Allan
  • jimbob72jimbob72 Posts: 49Questions: 0Answers: 0
    A nice solution and it works well when expanding - thanks. However, when closing the expanded row, because the oTable.fnClose function works immediately the closing div doesn't get a chance to slide shut. Is there a way of delaying the fnClose so the div collapses first?
  • macandersonmacanderson Posts: 1Questions: 0Answers: 0
    One suggestion I have is to slideup() the div prior to call fnClose.
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    There is a blog post about this particular topic now which includes a little animation: http://datatables.net/blog/Drill-down_rows :-)

    Allan
This discussion has been closed.