Long story short, Im not a web developer, but my company just bought a new indexing product and it displays its results in a jquery tablesorter (http://tablesorter.com), and I am having some difficulties getting it to behave the way I want.
Basically i wanted it so when you hover over a row, it changes a color, and when you click a row, it changes to a different color (that would stay that color even after being sorted). I have found code to help me with the hovering, and it is working perfect.
The click code I have I working pretty good, click a row, it changes colors, click it again, and it goes back to its zebra correct color. The only problem I have with it is when you click a header to sort 1 time (either desc or asc), then I loose clicking functionality. If I click the header again, I regain clicking functionality. It has nothing to do with whether the column is sorted desc or asc, it has to do with every other click on the header. I dont know if the click is changing the name of the class under the hood (but I dont think it is according to firefox's web developer - view generated dom source extension). Any help would be a major plus.
css code:
jquery code:
EXTRA - Here is the hover widget that works perfect even after clicking the header row, if it helps
Basically i wanted it so when you hover over a row, it changes a color, and when you click a row, it changes to a different color (that would stay that color even after being sorted). I have found code to help me with the hovering, and it is working perfect.
The click code I have I working pretty good, click a row, it changes colors, click it again, and it goes back to its zebra correct color. The only problem I have with it is when you click a header to sort 1 time (either desc or asc), then I loose clicking functionality. If I click the header again, I regain clicking functionality. It has nothing to do with whether the column is sorted desc or asc, it has to do with every other click on the header. I dont know if the click is changing the name of the class under the hood (but I dont think it is according to firefox's web developer - view generated dom source extension). Any help would be a major plus.
css code:
Code:
table.tablesorter tbody tr.even.rowclick td {
background:orange;
}
table.tablesorter tbody tr.odd.rowclick td {
background:orange;
}jquery code:
Code:
<head>
<script type="text/javascript">
$(function() {
// show the click row different than other rows
$.tablesorter.addWidget({
id: "rowClick",
format:
function(table) {
$('tr:visible',table.tBodies[0]).click( function () {
row = this;
if ($(row).hasClass(table.config.widgetRowClick.css))
$(row).removeClass(table.config.widgetRowClick.css);
else
$(row).addClass(table.config.widgetRowClick.css);
});
}
});
$("#tablesorter-demo").tablesorter({
widgets: ['zebra','rowHover','rowClick'],
widgetRowHover:{css:'rowhover'},
widgetRowClick:{css:'rowclick'}
});
});
</script>EXTRA - Here is the hover widget that works perfect even after clicking the header row, if it helps
Code:
$(function() {
// show the hover row different than other rows
$.tablesorter.addWidget({
id: "rowHover",
format: function(table) {
$('tr:visible',table.tBodies[0]).hover(
function () { $(this).addClass(table.config.widgetRowHover.css); },
function () { $(this).removeClass(table.config.widgetRowHover.css); }
);
}
});
Last edited:
Facebook
Twitter