Row Highlighting failure kinda

monkeytooth

So Im trying to highlight rows on mouse over, and its mostly working except it ignores the column that is acting as the active sorting colum here is my last attempt, even though I have combed over these forms for a little over an hour trying various other things.

My tables are standard format tables with thead, tbody, and tfoot. I wish to only highlight those in the tbody when someone mouses over. and have all columns including the active sort highlight to match the color going across

[code]"fnDrawCallback": function(){
$('table#'+tableID+' tbody tr').bind('mouseenter', function () { $(this).children().each(function(){$(this).addClass('dataTableHighlighter');}); });
$('table#'+tableID+' tbody tr').bind('mouseleave', function () { $(this).children().each(function(){$(this).removeClass('dataTableHighlighter');}); });
}[/code]

the background-color set for odd/even and odd/even sorting_X is white by default, as I didn't want zebra stripping. Though I don't know how that effects anything but felt it was worth mentioning.

allan

If you look at the DOM in Firebug / Inspector, I'd suggest that you'll see that the highlighting classes are being assigned to the column, but that the CSS being used is being overridden by the styling of the sorting column highlighting (probably because that is quite selective). Have a look at the CSS that is being used for the row background, the sorting columns backgrounds and the highlighting backgrounds - I'd imagine the issue is in there, rather that in Javascript.

Allan

allan

Oh btw - you might be better off using delegate (or live) events rather than fnDrawCallback - at the moment every time a row is drawn the event will be added again...

Allan

monkeytooth

Well, tried swapping it to a live method still the same result however. All td's on that tr get highlighted except the current active column that is acting as the sort. Looking at it in firebug the class I want added/removed on mouse over is being applied to the column in question. However it remains white.

[code]
.dataTableHighlighter{ background-color: #FFF1E0; }
table.dataTable tr.odd { background-color: white; } /*original: #E2E4FF*/
table.dataTable tr.even { background-color: white; }

table.dataTable tr.odd td.sorting_1 { background-color: white; }/*original: #D3D6FF*/
table.dataTable tr.odd td.sorting_2 { background-color: white; }/*original: #DADCFF*/
table.dataTable tr.odd td.sorting_3 { background-color: white; }/*original: #E0E2FF*/
table.dataTable tr.even td.sorting_1 { background-color: white; }/*original: #EAEBFF*/
table.dataTable tr.even td.sorting_2 { background-color: white; }/*original: #F2F3FF*/
table.dataTable tr.even td.sorting_3 { background-color: white; }/*original: #F9F9FF*/
[/code]

is the css far as I can tell. I changed it to all white as the zebra stripping wasn't desired.
As far as adding the live, the functionality above is what I applied to live, just conforming it to a live statment rather than bind. Not sure how I would do the mouseover/out though with delegate or I'd give that a try as well.

But overall as said, the style is being applied and unapplied as desired, except the column visually does not represent that only at a code level it appears to do so.

monkeytooth

Well, dunno what the exact problem was why my highlighter wasn't working when a specific column had a sorting* class. Even when I moved the class in question below the sorts so it could be defined after hierarchic wise. So what I ended up doing for now is just commenting the sorting_* rows out. Which now makes it work but leaves me with the unfortunate side effect of not highlighting the specific column thats acting as the active sort.

allan

Have a look at this example which shows how it can be done with CSS and retain the sort column highlighting: http://datatables.net/release-datatables/examples/advanced_init/highlight.html

Allan