Child rows animation problem - slideDown don't work

Child rows animation problem - slideDown don't work

culterculter Posts: 86Questions: 17Answers: 0

Hi, I'm trying to implement this
to slide down and up with animation by click on table row (not the plus sign as it is in the example)

THE PROBLEM: When I click on table row, the row details (child row) is displayed, but instantly without animation. When I click on row with opened row details, the row details slide up with animation, so sliding up works fine.

This is my code:

function format ( rowData ) {
    var div = $('<div/>')
        .addClass( 'loading' )
        .text( 'Loading...' );

    $.ajax( {
        url: 'scripts/details.php',
        data: {
            name: rowData[0]
//              'data0': rowData[0],
        dataType: 'json',
        type: 'post',
        success: function ( json ) {
            var childTable = '<div id="rowdetails" class="slider">';

$('#example tbody').on('click', 'tr', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        $('div.slider', row.child()).slideUp( function () {
        } );
    else {
        row.child( format(, 'no-padding' ).show();
        $('div.slider', row.child()).slideDown();
} );

Thank you

This question has accepted answers - jump to:


  • kthorngrenkthorngren Posts: 4,551Questions: 19Answers: 996

    Without testing it I'm not 100% sure but I suspect the problem is due to the async operation of the ajax call in the format function. The div.slider is probably not in the DOM when the $('div.slider', row.child()).slideDown(); is executed.

    Not sure, again without testing it, the best option to fix this problem. Assuming it is the problem. Can you provide a test case?


  • culterculter Posts: 86Questions: 17Answers: 0

    Thank you Kevin, I think you're right. The SlideUp is working, because the format function was already executed. I'm afraid I can't create test case, there is serverSide feature on and I'm using several external php scripts to load the data. :(

    Do you have some idea how to get the div.slider in the DOM before the row is clicked? Thanks

  • colincolin Posts: 3,280Questions: 0Answers: 584

    Hi @culter ,

    One thing is that a test case doesn't really need to get the data from Ajax, it just needs to demonstrate the main problem - that is the slider. So it could just use local data.



  • kthorngrenkthorngren Posts: 4,551Questions: 19Answers: 996
    Answer ✓

    Actually it was pretty easy to fix. I had this example from another thread that I added the row animation to.

    Just had to add the slider class to the loading div.


  • culterculter Posts: 86Questions: 17Answers: 0

    Thanks Colin, I got your point, but I'm working on server-side table for several months and there are many connections to another scripts which provide additional data and it's really difficult to build test case with such complex application. I really tried to create test case before I post this question, but then I gave up :( Is there some manual how to use Maybe it will help in the future.

    Kevin, thank you again. I managed it to work, but it's not working exactly as I expected:( Now, when I click on the row, the child row is sliding down slowly approx. 30 pixels (probably it assumes, that the child row has height of 30px) and then it jumps down. I have different height for every child row and the problem is probably it doesn't know the height. I know that this is not the DataTables problem, but maybe you know how to solve this quickly. Many thanks

  • kthorngrenkthorngren Posts: 4,551Questions: 19Answers: 996

    There is a tip for smoother animation in the blog you posted. Not sure if it would help. CSS is definitely a weak point for me :smile:

    Maybe you can update my example to replicate your issue so someone can take a look.


  • culterculter Posts: 86Questions: 17Answers: 0

    Kevin I did it! My first test case is here :) As you can see the sliding down is not as smooth as sliding up.

    I have also tried (in my test environment) the tip for smoother animation, but it didn't help.


  • kthorngrenkthorngren Posts: 4,551Questions: 19Answers: 996
    edited November 2018 Answer ✓

    I should have went with my first thought which is to perform the slide down in the format function. In order to do this the row variable needs to be passed to the function. Here is my updated example:

    For this example to work you need to remove this:

    div.slider {
        display: none;

    And add this:

    ul.slider {
        display: none;

    The example still relies on the div.slider to slide up. For slide down you will add the display: none slider for the type of elements you are displaying in the child.


  • culterculter Posts: 86Questions: 17Answers: 0

    Thank you, Kevin. I would never find out the solution without your kind help. It's working perfectly!

Sign In or Register to comment.