[英]tablesorter doesn't show up and down arrows
我正在尝试使用JQuery tablesoter插件但是当它显示箭头时,当我按降序或升序排序时,它不会显示向下或向上箭头。 它始终显示向上和向下箭头(未分类的箭头)。 似乎table.tablesorter .header {...}会覆盖table.tablesorter .headerSortUp {...}和table.tablesorter .headerSortDown {...}样式。 以下是我的代码:
CSS
table.tablesorter .headerSortUp {
background-image: url('../images/icons/asc.gif');
background-repeat: no-repeat;
background-position: center right;
}
table.tablesorter .headerSortDown {
background-image: url('../images/icons/desc.gif');
background-repeat: no-repeat;
background-position: center right;
}
table.tablesorter .header {
cursor: pointer;
background-image: url('../images/icons/bg.gif');
background-repeat: no-repeat;
background-position: center right;
}
我的表位于速度模板中,但我认为这不会影响此问题。
<table id="harvestTable" class="tablesorter" border="1">
<thead>
<tr>
<th>Source</th>
<th>Time</th>
</tr>
</thead>
<tbody>
#foreach($item in $self.harvestlist)
#set($harvestId = $item.getFirst('harvestId'))
...
我已在相应的文件夹中包含相关图标。 我正在使用chrome并在firefox上对此进行了测试,但两者都不兼容。 当我检查chrome中的元素时,我可以看到.header的图像覆盖了.headerSortUp和.headerSortDown图像。 如果我取消选择.header的图像,则会正确显示.headerSortUp图像。
我错过了什么吗? 我非常感谢有价值的回应。
谢谢
这是由于css偏好规则。 始终应用上次匹配的规则。 要克服这种情况,你可以随时使用!important修饰符,就像你的情况一样
table.tablesorter .headerSortDown {
background-image: url('../images/icons/desc.gif') !important;
要么
你只需将.header css放在.headerSortDown和.headerSortUp之前,它就会开始工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.