CODEWITHSUNDEEP
datatabledatatables
Hary
Hary

Reputation: 125

DataTables - Open child rows on top of parent row

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.

// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        $('div.slider', row.child()).slideUp( function () {
            row.child.hide();
            tr.removeClass('shown');
        } );
    }
    else {
        // Open this row
        row.child( format(row.data()), 'no-padding' ).show();
        tr.addClass('shown');

        $('div.slider', row.child()).slideDown();
    }
} );

https://jsfiddle.net/nnb97rh9/3/

Upvotes: 0

Views: 385

Answers (1)

BobRodes
BobRodes

Reputation: 6165

The problem is that HTML shows a nested table below the row it's nested in. The datatables routine that you're using sets up a nested table when you push the green button, so you're coming up against an HTML limitation.

The only way that you could maybe do this is very messy: on clicking a green button, go to the row prior to the current one, and call the format function on it. (Of course, you'd have to find a way to pass row.data from the current row rather than the previous one, after moving to the previous one. And there would be other messiness that I'm not going to contemplate.)

That begs the question of how to handle the first row, since there isn't one prior to it; you'd probably have to come up with a different function for that. That's all counter-intuitive and illogical: you don't really want to nest a table inside a row with data that's unrelated to it.

Which brings us to why you want to do this in the first place. You're almost certainly going to confuse your users: you're basically doing this differently from 99.99999% of the rest of the world, thereby depriving your users of their previous experience and making your UX counter-intuitive. As a comparison, what if you wanted a "dropup" list instead of the more usual dropdown list? Wouldn't that confuse most users?

My suggestion is to consider abandoning this idea. Take a few steps back and rethink what you want to accomplish, and then see if you can do things in a manner that's closer to established UI behavior. Users prefer to work with UIs that leverage their past experience working with UIs, so they don't have to put in extra time to learn a new way of doing things. Don't ask them to find new ways to do things they already know how to do, or they won't use your application.

Upvotes: 1

Related Questions