Tablesorter alternative coloring problem and solution
The problem:
When trying to combine zebra effect (alternative row colors) and row-hover highlight effect, only the even rows shows the highlight effect.
The (original code):
$(function() {
$("#tablesorter-demo").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra'] });
});
/*style.css*/
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter tr:hover td {
background-color: #632a2a;
color: #fff;
}
The fix:
/*style.css*/
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter tr.odd:hover td, table.tablesorter tr:hover td {
background-color: #632a2a;
color: #fff;
}
Other thought:
The highlight effect has not been tested in IE6 yet, might need to use js to achieve the same effect.
Hi, Neat post. There is an issue together with your website in web explorer, may test this? IE nonetheless is the marketplace chief and a good section of folks will leave out your magnificent writing due to this problem.
Thanks for poining out the browser compatibility problem, will definitely take a look sometime this weekend.
– Rico
Hi, Do you mind letting me know the version of Internet Explorer on which my site doesn’t render correctly? I just tested with IE8 and IE8 with compatibility mode (basically IE7) and it seems OK. I will test with other versions of IE when I got a chance. Thanks again.
Yeah just add the following lines of code in the heading section . It will cure all the problems of alternet row colour in the table sorter plugin.
$(document).ready(function () {
$(“#GridView1”).tablesorter({
widgets: [‘zebra’]
});
});
Thanks for the note Developer Tool. While tablesorter had its tim I have to say Data Tables (http://datatables.net/) is a much better (total) solution. I have used it exclusively in a number of projects and it works pretty well.