How to render data for a rows child() data only on the first time its expanded (And possible bug)
How to render data for a rows child() data only on the first time its expanded (And possible bug)
jLinux
Posts: 981Questions: 73Answers: 75
Hello,
I'm using the row().child method to render data in the child row (compiled with the neat sliding child rows from this blog post). When the ( + ) button is clicked, an AJAX request is made to retrieve data for the 'order' in that specific row, then in the success callback of the $.ajax() request, the table gets drawn up. Then I have a callback inside the $().slideDown(), which turns the table in the child row into a DataTables instance.
What I wanted to do, was have some logic when the child row is expanded, check if there's a DT instance present, if not, then it's the first time it's been expanded, so make the AJAX request and create the table, then initiate it as a DT instance. Otherwise, just show the table that was rendered previously.
However, I noticed that the child data actually gets destroyed when row().child.hide() is called, and re-rendered every time row().child.show() is called....
That would be handy if I cared about the data changing, then they could just collapse/expand the details row, but thats not the case. Is there a way to have it not destroy the data when it gets collapsed? and show any data that was already rendered when its expanded?
Here's a JSBin example of what I mean, just click the ( + ) and ( - ) links, and watch the console.
Answers
Im also running into a 2nd issue...
I notice that when the child rows are opened and the DT instance in the child row is initialized... it executes the
initof the parent table..Example here Any idea how to prevent that?
I know I could look at the
settings.sTableIdto make sure its the right table (inside the function(s) being executed)... but I hate having to hardcode that.I would actually kinda think this might classify as a bug
There are two issues stopping your code from working as expected:
1) The condition:
You are passing in a
divelement toisDataTablewhich is not a DataTable - so that will always be false.2) Perhaps more importantly is that you call
child( format(row.data()), 'no-padding' ).show()every time - so it is overwriting the existing DataTable every time. You need to check that it exists before doing that.This version does that: http://live.datatables.net/hohisere/1/edit .
The
elsecondition is left as an exercise ;-)Allan
@allan, thanks for the response! Im still having an issue re-expanding the child row here..
I updated the example, adding the
.slideDown()code to the lastelsecondition, but it doesnt expand.Any idea?
You have to show it
(
row.child.show()):http://live.datatables.net/jowubube/1/edit
@allan, thanks for the response! I see what you mean.
I got this example working (as far as re-expanding/collapsing the rows), but you can see that it re-renders the data inside the child row every time.
In my real code, that means it makes an ajax call every time, I only want it to make the call on the first expand, is that possible?
I was typing that up as you replied, lol.
Its my morning here, im still waking up, sorry >.<
You can tell that when you re-expand it the 2nd time, its not really a DT instance, its just a regular table... (EG: if you enable
searchingon the table, first expand shows it, then collapse it and expand it, and it wont be searchable).Is there a way to have it so the collapse doesnt "destroy" any data in the child row? rather just... hide it? Then re-show it when its opened again
Also, while im on the subject of DT instances within child rows... is it possible to render the DT instance before the child row is expanded?
check out this example, where theres a ton of rows in the nested table. When its expanded, you can see it takes a moment to render, and really messes with the size of the parent table.
That seems to be what is happening for me here: http://live.datatables.net/jowubube/2/edit . I click to show a row, then hide it and then show it again. It still retains the ability to be sorted.
Probably. You'd need to have the format function return just a div container so DataTables can render that into the document. Then insert your table as a node and initialise it and finally show it.
Allan