pause on row.child slideDown

rotorboy

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

I have a child.row that gets dynamically formatted with a table that has a header row: <tr><th></th><th></th></tr>

I added the animated slidedown as per the documentation, but when child row is shown, the slidedown pauses for a few maybe a tenth of second right after the header row, then finishes sliding down all the way.

I added the suggested CSS to remove padding, along with removing any explicit padding in the table HTML, but it still pauses for a moment after the header row. Does the <th> tag have some implicit padding, or is there something else about header rows that causes the slidedown not to animate properly?

kthorngren

See if this thread helps. If not please provide a link to your page or a running test case showing the issue so we can help.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

rotorboy

Hey Kevin

Thanks for getting back to me. Unfortunately, the thread you mentioned was not able to provide additional guidance in resolving the issue.

Tried to create a test on live.datatables.net but got a bit too involved recoding sample with the salient bits of my table. I did manage to cut down the perceptual aspect of the pause by reducing the animation time to 100 milliseconds from 400, so for now it will have to make do, unless you manage to have some insight without a sample.

Thanks again for getting back to me so quickly.

kthorngren

The test case doesn't need to replicate your full solution. What we want to look at is how you are building your child row environment. Can you replicate that to show the issue?

Kevin

rotorboy

Hey Kevin;

As requested, I re-attempted to find the slideDown-offending table-generating HTML of my "format_child_row", but alas have not been able to find what is adding a lag just after the child-row table header row is displayed.

The actual child_row formating code just returns a table within a div

'<div class="slider">
<table cellpadding="5" cellspacing="0" border="0" style="padding-left:200px;"><th>h1</th>

<tr><td>' + row.data() + '</td></tr> 
etc..

</table></div>

My test case is here.

http://live.datatables.net/nayuruce/4/edit

Oddly enough, slideDown doesn't seem to work properly in the test case, even though I copied the code directly from my functioning code. I will try to keep looking at it, but I'm not sanguine in finding the issue.

kthorngren

I inspected your slider div and found this:

<div class="slider" style="">...</div>

You are missing a } for one of your CSS. I added the }. Here is the updated example:
http://live.datatables.net/nayuruce/5/edit

Is this working the way you want? If not please describe the issue.

Kevin

rotorboy

Kevin;

Good eyes and my apologies... that's what I get for cut-and-pasting in the wee hours. The CSS in production code has the bracket, so that wasn't an issue.

In order to simplify debugging, I changed my row formatting code to return exactly the same HTML as in the "format_row" function seen and functioning smoothly here:

http://live.datatables.net/nayuruce/7/edit

And yet the "slidedown stutter" problem still persists on my machine; the slidedown slides past the child row table header row then pauses for about 100-200ms, then continues downward to display the rest of the table.

My guess is there is something OUTSIDE of the "format_row" function and associated HTML that is causing the slidedown stutter. It would be nice to be able to post a video of the problem so you can see what I'm talking about.

I'm not sure how to proceed here, or what DT support can do to help figure out the issue. Again, really appreciate the time and effort on a rather banal issue.

kthorngren

The slidedown() method is a jQuery method:
https://api.jquery.com/slideDown/

It would be difficult to troubleshoot without being able to look at the page.

Do you have the slider class applied anywhere else on the page? You could try a more targeted selector.

Try a different jQuery version.

Not sure what all is on your page. Maybe you can start with a base test page then add items from your page until it breaks. Or go the opposite and remove item until it works.

Not sure of a way to debug slidedown. You could put a breakpoint at the slidedown() statement to see what happens with the table to that point.

Kevin