Child rows animation problem - slideDown don't work

culter

Hi, I'm trying to implement this https://datatables.net/blog/2014-10-02
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 ) {
        console.log(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 ) {
            console.log(json);
            var childTable = '<div id="rowdetails" class="slider">';
.....
.....
</div>


$('#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 () {
        row.child.hide();
        tr.removeClass('shown');
        } );
    }
    else {
        row.child( format(row.data()), 'no-padding' ).show();
        tr.addClass('shown');
        $('div.slider', row.child()).slideDown();
    }
} );

Thank you

kthorngren

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?

Kevin

culter

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

colin

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.

Cheers,

Colin

kthorngren

Actually it was pretty easy to fix. I had this example from another thread that I added the row animation to.
http://live.datatables.net/ratusuwa/1/edit

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

Kevin

culter

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 live.datatables.net? 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

kthorngren

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

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

Kevin

culter

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.

Thanks

kthorngren

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:
http://live.datatables.net/sebizeri/3/edit

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.

Kevin

culter

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