I am trying to use the JQuery tablesoter plugin but when it comes to show the arrows it doesn't show either down or up arrow when I sort descending or ascending order. It always shows up and down arrow (unsorted arrow). It seems table.tablesorter .header {...} overrides the table.tablesorter .headerSortUp {...} and table.tablesorter .headerSortDown{...} styles. Below is my code :
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;
}
My table is in a velocity template but I don't think that will affect for this problem.
<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'))
...
And I have included the relevant icons at respective folders. I am using the chrome and tested this on firefox as well but doesn't work in both. When I inspect the element in chrome, I can see that .header's image has overriden the .headerSortUp and .headerSortDown images. If i unselect .header's image, .headerSortUp image is correctly shown.
Have I missed something here? I really appreciate the valuable responses.
Thanks
The problem you are having is due to css specificity (try out this calculator):
The default blue theme uses:
table.tablesorter thead tr .headerSortUp {} // (0,0,2,3)
so, in order to override this, you'll need a higher css specificity. One way would be to add a th
to the sort class:
table.tablesorter thead tr th.headerSortUp {} // (0,0,2,4)
This is due to css preference rule. Last matched rule is always applied. to overcome this situation you can always use !important modifier, like in your case
table.tablesorter .headerSortDown {
background-image: url('../images/icons/desc.gif') !important;
or
you just put .header css before .headerSortDown and .headerSortUp and it will start working.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With