특정 디스플레이 태그 헤더에 이미지 아이콘을 표시하는 방법은 무엇입니까?

Question

페이지 번호 매기기 및 정렬을 위해 Display Tag 라이브러리를 사용하고 있습니다. 사용자가 헤더 필드를 클릭하여 열을 정렬 할 때 이미지가 표시되도록 테이블 머리글 옆에 아이콘 이미지 (upArrow, downArrow)를 추가합니다. 주문 기준. 처음에는 아이콘이 헤더 열에 표시되지 않지만 사용자가 열 정렬되었음을 알 수 있도록 페이지가 기본값으로로드 될 때 내 열에 표시하려고합니다 (이 방법을 어떻게 얻을 수 있을지 잘 모르겠습니다.)).

사용자가 하나의 필드를 클릭하면 이전 필드의 아이콘 양식이 사라지고 선택한 열에 나타납니다 (이 작업 완료). 시작시

열은 전자 서명 생성 날짜 열에 사용자가 클릭 한 후

(더 화살표 아이콘,하지만 난이 만든 날짜 열을 표시 할 필요가 없습니다)

(아이콘이 나타납니다)

페이지가로드 될 때 생성 된 날짜 열에 아이콘을 표시하려면 어떻게해야합니까?

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