Highlight columns on mouseenter and also the correspondent table header cell

1cebola

Hello, I've been having trouble with highlighting both the column and the correspondent header cell. Also I wanted the trigger for the highlight to be in the header instead of the row.

Essentially I wanted it to work like this and currently I have the exemple given on the website, it works but not exactly like I want it to:

$(document).ready(function() {
    var table = $('#example').DataTable();
     
    $('#example tbody')
        .on( 'mouseenter', 'td', function () {
            var colIdx = table.cell(this).index().column;
 
            $( table.cells().nodes() ).removeClass( 'highlight' );
            $( table.column( colIdx ).nodes() ).addClass( 'highlight' );
            $( table.table().header() )
                    .addClass( 'highlights' );
        } );
} );

Is there any way of making this work?

colin

Hi @1cebola ,

Here's your example in a fiddle. Looking at that example, and reading your words, it sounds like it's doing what you want. When you say it works, but not how you want it to, could you explain more, please.

Cheers,

Colin

1cebola

Thank you for the answer, but I guess I'm looking for something else. I'm using the bootstrap4 files and while the hover works on rows and columns it's not working with the header.

colin

Ah, I see what you mean, is this example here more like what you're after?

Cheers,

Colin