datatables 1.10 - Detail row

deliator

Hi,

Inspiring from https://www.datatables.net/examples/api/row_details.html how can i edit that code getting works with hover action (instead of the clic action) ? Alternatively, how can i display direcly the detail row (without clic or hover action) ?

Thanks for help,

Marc

allan

Do you want to show the child row on mouse over rather than click? It might be quite confusing as an interface, but you would just use mouseover rather than the click event.

If you want to show the details in a tooltip, which would probably be better UX (imho!) you would need to make use of a tooltip library.

Allan

deliator

Thanks Allan,

Understanding for the over action ...
And if i just want to display directly the detail row, without any clic action ?

allan

edit Sorry - posted this in the wrong thread!

allan

And if i just want to display directly the detail row, without any clic action ?

Use a mouseover or even better a mouseenter event rather than click.

Allan

deliator

ok Allan.

It works with mousenter with the original code

    $('#example tbody').on('mouseenter', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
     } );

When i leave de row it stay visible until i come back on it. I need the row hiding when i leave it ...

deliator

Answering to myself :-) Is this the best way Allan, adding this to th previous code ?

$('#example tbody').on('mouseout', 'td.details-control', function () {
     var tr = $(this).closest('tr');
     var row = table.row( tr );
     row.child.hide();
     tr.removeClass('shown');
 } );            

deliator

By the way, what if i want the detail rows always be displayed (no action needed) ?

Like this example : https://datatables.net/extensions/responsive/examples/display-types/immediateShow.html

(i got an error with this example : "Uncaught TypeError: Cannot read property 'display' of undefined")

allan

Is this the best way Allan, adding this to th previous code ?

Looks fine to me.

By the way, what if i want the detail rows always be displayed (no action needed) ?

Don't use an event handler, just immediately call the child().show() method.