Open child rows on top of parent row

haryp

I need to implement functionality where child row will slide and open on the top of the parent row instead of bottom. Could anyone please help.
https://jsfiddle.net/nnb97rh9/3/

kthorngren

The jQuery insertBefore() method seems to do the trick:
https://jsfiddle.net/noszdw0c/

I made these changes:

            var index = row.index();
            row.child( format(row.data()), 'no-padding row-' + index ).show();
            tr.addClass('shown');

            $('tr.row-' + index).insertBefore(tr);

The row().child() API allows has a class parameter. My example gets the row index and adds a classname that includes the row index. Each row ends up with a unique classname so we can use that as the selector for insertBefore(). This moves the child row before the tr that is being shown.

Also note I added the below to the example for the slideDown() method to work properly:

table.dataTable tbody td.no-padding {
    padding: 0;
}

div.slider {
    display: none;
}

There may be a better way to do this but it seems to work. I don't believe there are any built-in options for this.

Kevin

haryp

Thank you so much. I implemented this way.