如何在特定显示标签 header 上显示图像图标？

Question

我正在使用 Display Tag 库进行分页，并且 sorting.I 还在 table header 旁边添加了一些图标图像（upArrow、downArrow），这样当用户单击 header 字段以根据排序标准对图像将显示的列进行排序。最初该图标不会出现在任何 header 列中，但我希望它出现在我的 created date 列中，当页面默认加载时只是为了让用户知道该列已被排序（我我不确定我怎样才能做到这一点）。

一旦用户单击一个字段，前一个字段的图标就会消失并出现在选定的列中（已完成）。

启动时的列（没有箭头图标，但我需要在创建日期列中显示它）

用户点击 E-Sign 创建日期列后（出现图标）

如何在页面加载时在创建日期列中显示图标？

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

如何在特定显示标签 header 上显示图像图标？

How to show an image icon on a particular display tag header?

html

css

jsp

displaytag