Child row with button (which shows hidden content)
Child row with button (which shows hidden content)
culter
Posts: 102Questions: 24Answers: 0
Hello, I have DataTable with button in row child. I have hidden content below the button and I need to display this hidden content after click on this button. I tried it on my own, but the best working version was, that the button in one row child also manages the content of all other childrows. 
He re is my test case https://jsfiddle.net/nnb97rh9/1604/
Thank you
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Hi @culter ,
Take a look at gyrocode's solution in this thread - that has a child row button in his fiddle.
Cheers,
Colin
Hi colin. Yes, I know about this fiddle. I modified it to do it almost what I need, but there is the problem.
When I open 1 child row and click on the button, everything is working fine, but when 2 child rows are opened, button in 2nd child row interacts with the content in 1st child row. Is it possible to fix it? Thank you
Can you post your example so we can take a look?
My guess is you are using a table ID for the child table? if so they need to be different for each table.
Kevin
Sorry, we had christmas party yesterday
Here it is:
https://jsfiddle.net/192mruyd/1/
Hi @culter ,
Yep, as Kevin said, you've giving all buttons the ID 'MyDIV' - they should be unique. Probably the easiest way is to either give it a timestamp or the row number.
Cheers,
Colin
Thanks, really good point. I'm trying to use "extension number" and I modified this line of format function:
'<div id="' + d.extn + '" style="display:none">Toggle content</div>' +but I don't know how to get the d.extn to the function at the bottom. I know it has almost nothing to do with dataTables, but maybe it'll help other users too. Thanks
Here is the modified version:
https://jsfiddle.net/192mruyd/2/
Figured the easiest way would be to add a data attribute to the button that contains
d.extn. Then used jQuery to get the value of the data attribute which is used in thegetElementById.https://jsfiddle.net/xtsp5db7/1/
Kevin
Thank you, Kevin. It's working great.