html - 如何在特定显示标签标题上显示图像图标？

Question

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

一旦用户单击一个字段，前一个字段的图标就会消失并出现在所选列上(已完成)。

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

用户点击电子签名创建日期列后(出现图标)

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

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