Tablesorter zeigt keine Pfeile nach oben und unten an

Question

Ich versuche, das JQuery-Tablesoter-Plugin zu verwenden, aber wenn es um die Pfeile geht, zeigt es weder nach unten noch nach oben, wenn ich absteigend oder aufsteigend sortiere. Es zeigt immer Pfeil nach oben und unten (unsortierter Pfeil). Es scheint, dass table.tablesorter .header {...} die Tabellen "table.tablesorter .headerSortUp {...} und table.tablesorter .headerSortDown {...} überschreibt. Unten ist mein 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; 
} 

Meine Tabelle in einer Geschwindigkeit Vorlage ist, aber ich glaube nicht, dass für dieses Problem auswirken wird.

<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')) 
... 

Und ich habe die entsprechenden Symbole in entsprechenden Ordnern enthalten. Ich benutze das Chrom und habe es auch auf Firefox getestet, funktioniert aber nicht in beiden. Wenn ich das Element in Chrome inspiziere, kann ich sehen, dass das Bild von header die Bilder .headerSortUp und .headerSortDown überschrieben hat. Wenn ich das header-Bild abnehme, wird das .headerSortUp-Bild korrekt angezeigt.

Habe ich hier etwas verpasst? Ich schätze die wertvollen Antworten sehr.

Dank

Answer 1

Das Problem, das Sie haben werden, ist aufgrund css specificity (ausprobieren this calculator):

Die Standard-blau Thema verwendet:

table.tablesorter thead tr .headerSortUp {} // (0,0,2,3) 

, um so diese außer Kraft zu setzen, werden Sie eine höher CSS-Spezifität. Eine Möglichkeit wäre, der Sortierklasse th hinzuzufügen:

table.tablesorter thead tr th.headerSortUp {} // (0,0,2,4) 

Answer 2

Dies ist aufgrund css Präferenzregel. Die letzte übereinstimmende Regel wird immer angewendet. nutzen diese Situation zu überwinden, kann man immer! important Modifikator, wie in Ihrem Fall

table.tablesorter .headerSortDown { 
background-image: url('../images/icons/desc.gif') !important; 

oder

Sie gerade setzen .header css vor .headerSortDown und .headerSortUp und es wird anfangen zu arbeiten.