row details to expand upwards instead of downwards

capris

Hi Allan,

is there a way to expand the rows upwards instead of downwards? row details should come above the actual row, instead of below.
can I get any examples of that kind.

ThomD

You can use Jquery to move the child with the insertBefore function.

In the code that opens the child,(in the example it looks like this)

// Open this row
row.child( formatChild(row.data()) ).show();
tr.addClass('shown');

you need to add this bit at the end..

myChild = $(tr.next('tr'));
myChild.insertBefore(tr);

capris

Thanks Thom.This works when a click event happens, but incase of table redrawn like paging, filter, sorting when the rows are expanded. it redraws showing the child below the parent Tr. I expand few rows and do filter. Table is redrawn and automatically the childs are below the parent tr.

ThomD

Well, I thought I could tap into the dt draw or search events and use the same idea:

$('#example').on( 'draw.dt', function () {
    IamShown = $('.shown td.details-control');
    if ( IamShown.length == 0 ) {
        console.log('nothing shows');
    } else {
        console.log('showing');
        myRow = $(IamShown.closest('tr'));
        myChild = $(myRow.next('tr'));
        myChild.insertBefore(myRow);
        }
}

but no luck.

The event fires but at that moment the child row isn't yet part of the DOM, so the attempt to get the "next" tr brings up the next main row in the table.

Hopefully Allan can suggest what event we need to latch on to.

allan

The draw event is the correct one - you just need to do it when the row is displayed as well since that doesn't trigger a draw. Example: http://live.datatables.net/sinigatu/1/edit

I used the following to insert the child row before the parent:

    $('#example tr.shown').each( function () {
      $(this).next().insertBefore( this );
    } );

You could pass the table variable in if you wanted to be able to reuse it for other tables (i.e. select only the rows in the given table).

Allan

capris

Hi Allan,

Thanks for responding. Even in the above link which you have shared, when I expand a single after a click event it adds child row on top of parent. But when I do a search filter after expanding, table is redrawn and child moves below the parent. It doesnt remain on top of parent. And even when the search filtered is removed, its redrawn adding child on to top of parent.

allan

Try this one: http://live.datatables.net/sinigatu/8/edit .

Allan

capris

Thanks Allan. i could see that these lines are added. Could please explain how is that happening on filter,sort and paging.
setTimeout( function () {
moveInserts();
}, 10 );

capris

i think i got it. is it like child rows are loaded into the DOM and then 10s later we are calling the function. if we dont delay it for 10s, since child rows are not present in DOM, next 'tr' is other parent row. please confirm if correct.

allan

10mS, but yes that is the issue. Its just code ordering - the child rows were being added after the event handler was being called.

Allan

capris

Thanks for the reply and help provided.