特定の表示タグのヘッダーに画像アイコンを表示するにはどうすればよいですか？

Question

私はページ分割とソートのためにDisplay Tagライブラリを使用しています。また、ユーザーがヘッダーフィールドをクリックして列を並べ替えると画像が表示されるように、いくつかのアイコンイメージ（upArrow、downArrow）をテーブルヘッダーの隣に追加します。注文基準当初、アイコンはヘッダー列には表示されませんが、私はcreated date列にその列がソートされていることをユーザーに知らせるためにページがデフォルトとしてロードされるときにそれを欲しかったです（私はこれをどのように達成できるかわかりません）。

ユーザーが1つのフィールドをクリックすると、前のフィールドのアイコンフォームが消え、選択した列に表示されます（これは完了です）。

起動時に列（なし矢印アイコンが、私は、作成された日付列にそれを表示する必要があります）E-ログイン作成日の欄にユーザーがクリックした後

（アイコンが表示されます）

ページが読み込まれたときに、作成した日付列にアイコンを表示するにはどうすればよいですか？

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

これは私がCSSを使用して、それをやっているし、それは完全に正常に動作しているかです。

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%; 
}