integration with jExpand or similar?

LeadVisionary

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)

allan

DataTables has support for this kind of thing built in: http://datatables.net/examples/api/row_details.html

Allan

jimbob72

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...

allan

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

jimbob72

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?

macanderson

One suggestion I have is to slideup() the div prior to call fnClose.

allan

There is a blog post about this particular topic now which includes a little animation: http://datatables.net/blog/Drill-down_rows :-)

Allan