Wie wird ein Bildsymbol in einem bestimmten Display-Tag-Header angezeigt?

Question

Ich benutze Display Tag Bibliothek für Paginierung und Sortierung. Ich füge auch einige Symbolbilder (upArrow, downArrow) neben dem Tabellenkopf, so dass, wenn ein Benutzer auf ein Headerfeld klickt, um die Spalten zu sortieren, die Bilder entsprechend angezeigt werden die Bestellkriterien. Anfangs wird das Symbol nicht in einer der Header-Spalten sein, aber ich möchte es in meiner created date Spalte, wenn die Seite als Standard geladen wird, nur um die Benutzer wissen zu lassen, dass die Spalte sortiert wurde (ich bin mir nicht sicher, wie ich das erreichen kann)).

Sobald der Benutzer auf ein Feld klickt, verschwindet das Symbol aus dem vorherigen Feld und erscheint auf den ausgewählten Spalten (Das ist erledigt).

Spalten beim Start (keine Pfeilsymbole, aber ich brauche es auf dem Erstellungsdatum Spalte zeigen)

Nach Benutzer klickt auf der E-Sign Erstellungs-Datum Spalte (Symbol erscheint)

Wie kann ich das Symbol in der Spalte für das Erstelldatum anzeigen, wenn die Seite geladen wird?

JSP:

<display:table id="data" name="intgList" requestURI="/integration/viewIntegration" class="fieldLabelCell" pagesize="10"> 
     <!-- Setting table properties --> 
     <display:setProperty name="basic.empty.showtable" value="true"/> 
     <display:setProperty name="paging.banner.placement" value="top"/> 
     <display:setProperty name="basic.msg.empty_list_row" value=""/> 
     <display:setProperty name="paging.banner.group_size" value="2"/> 
     <display:setProperty name="paging.banner.no_items_found" value=""/> 
     <display:setProperty name="paging.banner.page.separator" value=" of "/> 
     <display:setProperty name="paging.banner.first" value='<span class="pagelinks"> |< << | Page {0} <a href="{3}"> | >> </a><a href="{4}">>|</a></span>'/> 
     <display:setProperty name="paging.banner.last" value='<span class="pagelinks"> <a href="{1}">|< </a> <a href="{2}"> << | Page </a> {0} | >> >| </span>'/> 
     <display:setProperty name="paging.banner.full" value='<span class="pagelinks"> <a href="{1}">|< </a> <a href="{2}"> << | Page </a> {0}<a href="{3}"> | >> </a><a href="{4}">>| </a></span>'/> 

     <!-- Displaying columns data --> 
     <display:column property="lob" title="Line of<br>Business" sortable="true" class="displayColumns" /> 
     <display:column property="insuredName" title="Insured" sortable="true" class="displayColumns"/> 
     <display:column property="custPhone" title="Customer<br>Phone" sortable="true" class="displayColumns" /> 
     <display:column property="policyNumber" title="Policy #" sortable="true" class="displayColumns" /> 
     <display:column property="createdDate" title="E-Sign<br>Created Date" sortable="true" class="displayColumns" /> 
     <display:column property="custEmail" title="Customer<br>Email" sortable="true" class="displayColumns" /> 
     <display:column title="# of E-Sign Documents" class="displayColumns" > 
      <c:forEach items="${intgList}" var="list"> 
       <a id="eSignNumDocs" href= "javascript:locateFunc('viewESignDetails', {'url':'<integration:urlAction actionName="/integration/viewDetailsIntegration"><integration:urlParam key="esignIdentifier" value="${list.esignId}"/></integration:urlAction>', 
        'agencyCode':'${list.agencyCode}', 
        'policyNumber':'${list.policyNumber}', 
        'policyState':'${list.policyState}', 
        'esignIdentifier':'${list.esignId}', 
        'esignVendorIdentifier':'${list.esignVendorIdentifier}', 
        'lob':'${list.lob}', 
        'transId':'${list.transId}', 
        'customerName':'${list.insuredName}', 
        'customerPhone':'${list.custPhone}', 
        'customerEmail':'${list.custEmail}', 
        'cretedDate':'${list.createdDate}'});"> 
        <c:out value="${list.esignNumDocs}"/> 
       </a> 
      </c:forEach> 
     </display:column> 
    </display:table> 

CSS:

th { 
height: 25px; 
border: 1px solid #EAEAEA; 
} 

th.order1 { 
background: url("../images/integration/upArrow.gif") no-repeat 30%; 
} 

th.order2 { 
background: url("../images/integration/downArrow.gif") no-repeat 30%; 
} 

Answer 1

Dies ist, wie ich es tue, CSS und es funktioniert völlig in Ordnung.

th { 
height: 25px; 
border: 1px solid #EAEAEA; 
} 

th:nth-child(5) { 
background: url("../images/integration/downArrow.gif") no-repeat 30%; 
} 

th.order1 { 
background: url("../images/integration/upArrow.gif") no-repeat 30%; 
} 

th.order2 { 
background: url("../images/integration/downArrow.gif") no-repeat 30%; 
}