title: How to show an image icon on a particular display tag header?
body: <p>I am using <code>Display Tag</code> library for pagination and sorting.I am also adding some icon images (upArrow,downArrow) next to the table header so that when a user clicks on a header field to sort the columns the images will  show up according to the ordering criteria. Initially the icon won't be in any of the header column but I want it in my <code>created date</code> column when the page loads up as default just to let the users know that the column has been sorted (I am not sure how can I achieve this). </p>
  
  <p>Once the user clicks on one field the icon form the previous field disappears and appears on the selected columns(This is done).</p>
  
  <p>Columns on startup (no arrow icons, but I need to show it on the Created date column)
  <a href="https://i.stack.imgur.com/JJXxL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JJXxL.jpg" alt="enter image description here"></a></p>
  
  <p>After user clicks on the E-Sign Created Date column (icon appears)
  <a href="https://i.stack.imgur.com/8Q0Dv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8Q0Dv.jpg" alt="enter image description here"></a></p>
  
  <p>How can I show the icon on the created date column when the page loads up?</p>
  
  <p>JSP:</p>
  
  <pre><code>&lt;display:table id="data" name="intgList" requestURI="/integration/viewIntegration" class="fieldLabelCell" pagesize="10"&gt;
          &lt;!-- Setting table properties --&gt;
          &lt;display:setProperty name="basic.empty.showtable" value="true"/&gt;
          &lt;display:setProperty name="paging.banner.placement" value="top"/&gt;
          &lt;display:setProperty name="basic.msg.empty_list_row" value=""/&gt;
          &lt;display:setProperty name="paging.banner.group_size" value="2"/&gt;
          &lt;display:setProperty name="paging.banner.no_items_found" value=""/&gt;
          &lt;display:setProperty name="paging.banner.page.separator" value=" of "/&gt;
          &lt;display:setProperty name="paging.banner.first" value='&lt;span class="pagelinks"&gt; |&lt; &lt;&lt; | Page {0} &lt;a href="{3}"&gt; | &gt;&gt; &lt;/a&gt;&lt;a href="{4}"&gt;&gt;|&lt;/a&gt;&lt;/span&gt;'/&gt;
          &lt;display:setProperty name="paging.banner.last" value='&lt;span class="pagelinks"&gt; &lt;a href="{1}"&gt;|&lt; &lt;/a&gt; &lt;a href="{2}"&gt; &lt;&lt; | Page &lt;/a&gt; {0} | &gt;&gt; &gt;| &lt;/span&gt;'/&gt;
          &lt;display:setProperty name="paging.banner.full" value='&lt;span class="pagelinks"&gt; &lt;a href="{1}"&gt;|&lt; &lt;/a&gt; &lt;a href="{2}"&gt; &lt;&lt; | Page &lt;/a&gt; {0}&lt;a href="{3}"&gt; | &gt;&gt; &lt;/a&gt;&lt;a href="{4}"&gt;&gt;| &lt;/a&gt;&lt;/span&gt;'/&gt;
  
          &lt;!-- Displaying columns data --&gt;
          &lt;display:column property="lob" title="Line of&lt;br&gt;Business" sortable="true" class="displayColumns" /&gt;
          &lt;display:column property="insuredName" title="Insured" sortable="true"  class="displayColumns"/&gt;
          &lt;display:column property="custPhone" title="Customer&lt;br&gt;Phone" sortable="true"  class="displayColumns" /&gt;
          &lt;display:column property="policyNumber" title="Policy #" sortable="true" class="displayColumns" /&gt;
          &lt;display:column property="createdDate" title="E-Sign&lt;br&gt;Created Date" sortable="true"  class="displayColumns" /&gt;
          &lt;display:column property="custEmail" title="Customer&lt;br&gt;Email" sortable="true" class="displayColumns" /&gt;
          &lt;display:column title="# of E-Sign Documents" class="displayColumns" &gt;
              &lt;c:forEach items="${intgList}" var="list"&gt;
                  &lt;a id="eSignNumDocs" href= "javascript:locateFunc('viewESignDetails', {'url':'&lt;integration:urlAction actionName="/integration/viewDetailsIntegration"&gt;&lt;integration:urlParam key="esignIdentifier" value="${list.esignId}"/&gt;&lt;/integration:urlAction&gt;',
                      '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}'});"&gt;
                      &lt;c:out value="${list.esignNumDocs}"/&gt;
                  &lt;/a&gt;
              &lt;/c:forEach&gt;
          &lt;/display:column&gt;
      &lt;/display:table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>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%;
  } 
  </code></pre>