Can't get row hover to work
Can't get row hover to work
Gerald
Posts: 3Questions: 0Answers: 0
Currently I am using this to initialize the data tables
[code]
$(document).ready(function () {
var oTable = $('#example').dataTable({
"sDom": '<"top"i>rt<"bottom"lp><"clear">',
"bJQueryUI": true,
"bServerSide": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"sAjaxSource": '@Url.Action("Pagination_With_Data_Table_issue_getData")',
"bFilter": true,
"oLanguage": {
"sLengthMenu": ' Show _MENU_ per page' //change text to have Show #DD per page
},
"aLengthMenu": [10, 20, 30, 40, 50],
"bSortClasses": false
});
});
[/code]
I've tried every example I can find from CSS like:
[code]
#example tbody tr.inactive,
#example tbody tr.inactive td.sorting_1 {
background-color: #fccfcf
}
#example tbody tr:hover,
#example tbody tr:hover td.sorting_1 {
background-color: #e2ebff;
cursor: pointer
}
[/code]
To javascript settings like:
[code]
$('td', oTable.fnGetNodes()).hover( function() {
var iCol = $('td').index(this) % 5;
var nTrs = oTable.fnGetNodes();
$('td:nth-child('+(iCol+1)+')', nTrs).addClass( 'highlighted' );
}, function() {
$('td.highlighted', oTable.fnGetNodes()).removeClass('highlighted');
} );
[/code]
What really throws me off, doing
[code]
table.dataTable tr.odd {
background-color: white;
}
[/code]
works fine, but not
[code]
table.dataTable tr.odd:hover {
background-color: red;
}
[/code]
Any suggestions would be great.
Thanx
[code]
$(document).ready(function () {
var oTable = $('#example').dataTable({
"sDom": '<"top"i>rt<"bottom"lp><"clear">',
"bJQueryUI": true,
"bServerSide": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"sAjaxSource": '@Url.Action("Pagination_With_Data_Table_issue_getData")',
"bFilter": true,
"oLanguage": {
"sLengthMenu": ' Show _MENU_ per page' //change text to have Show #DD per page
},
"aLengthMenu": [10, 20, 30, 40, 50],
"bSortClasses": false
});
});
[/code]
I've tried every example I can find from CSS like:
[code]
#example tbody tr.inactive,
#example tbody tr.inactive td.sorting_1 {
background-color: #fccfcf
}
#example tbody tr:hover,
#example tbody tr:hover td.sorting_1 {
background-color: #e2ebff;
cursor: pointer
}
[/code]
To javascript settings like:
[code]
$('td', oTable.fnGetNodes()).hover( function() {
var iCol = $('td').index(this) % 5;
var nTrs = oTable.fnGetNodes();
$('td:nth-child('+(iCol+1)+')', nTrs).addClass( 'highlighted' );
}, function() {
$('td.highlighted', oTable.fnGetNodes()).removeClass('highlighted');
} );
[/code]
What really throws me off, doing
[code]
table.dataTable tr.odd {
background-color: white;
}
[/code]
works fine, but not
[code]
table.dataTable tr.odd:hover {
background-color: red;
}
[/code]
Any suggestions would be great.
Thanx
This discussion has been closed.
Replies
Allan
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
[code]
from the top of the html page. Why that would stop a hover class from working I have no idea, but everything works fine when I put it in and stops when I take it out.