struts 2 display tag styles

 

Struts 2 display tag styles quite different and complex so here I am going to consolidating all types of possible styles and different types options in terms of data displaying. Displays a list in an html table, formatting each item in the list according to the Column tags nested inside of this tag. Use the list attribute to indicate the Collection of data, in some scope, that the tag should operate on.

Supports the export of the list data to alternative formats such as CSV, Excel, and XML. The contents of the list can be sorted, and the list can be broken into individual pages for display. If you use this tag in Struts, or in some other framework where the page is included via a jsp:include, you should use the requestURI attribute to indicate where tag generated links should point.

Basic Display Tag table

<display:table  id="data"  name="custlist" requestURI="/userAction.do" >
            <display:column property="rank" title="Rank"    />
            <display:column property="name" title="Name"   />
            <display:column property="age" title="Age"  />
            <display:column property="netWorth" title="Net Worth"   />
</display:table>

 

Customize table page size

<display:table  id="data"  name="custlist" requestURI="/userAction.do" pagesize="10" >
            <display:column property="rank" title="Rank"    />
            <display:column property="name" title="Name"   />
            <display:column property="age" title="Age"  />
            <display:column property="netWorth" title="Net Worth"   />
</display:table>

 

Sort enable for one column in table

<display:table  id="data"  name="custlist" requestURI="/userAction.do" pagesize="10" >
            <display:column property="rank" title="Rank" sortable="true"   />
            <display:column property="name" title="Name"   />
            <display:column property="age" title="Age"  />
            <display:column property="netWorth" title="Net Worth"  />
</display:table>

 

Sort enable for all columns in table

<display:table  id="data"  name="custlist" requestURI="/userAction.do" pagesize="10" >
            <display:column property="rank" title="Rank" sortable="true"   />
            <display:column property="name" title="Name"  sortable="true" />
            <display:column property="age" title="Age" sortable="true" />
            <display:column property="netWorth" title="Net Worth"  sortable="true" />
</display:table>

 

Export enable for table

<style>
span.excel {
    background-image: url("../images/ico_file_excel.png");
    background-repeat: no-repeat;
}
span.csv {
    background-image: url("../images/ico_file_csv.png");
    background-repeat: no-repeat;
}
span.xml {
    background-image: url("../images/ico_file_xml.png");
    background-repeat: no-repeat;
}
span.pdf {
    background-image: url("../images/ico_file_pdf.png");
    background-repeat: no-repeat;
}
span.rtf {
    background-image: url("../img/ico_file_rtf.png");
    background-repeat: no-repeat;
}
</style>

<display:table export="true"  id="data"  name="custlist" requestURI="/userAction.do" pagesize="10" >
            <display:column property="rank" title="Rank" sortable="true"   />
            <display:column property="name" title="Name" sortable="true"  />
            <display:column property="age" title="Age" sortable="true"  />
            <display:column property="netWorth" title="Net worth ($BIL)" sortable="true"  />
</display:table>

Sort images for sorting

<style>
th.sortable a {
    background-image: url("../images/arrow_off.png");
    background-repeat: no-repeat;
}
th.order1 a {
    background-image: url("../images/arrow_down.png");
    background-repeat: no-repeat;
}
th.order2 a {
    background-image: url("../images/arrow_up.png");
    background-repeat: no-repeat;
}
</style>

<display:table id="data" name="custlist" requestURI="/userAction.do" pagesize="10" >
   <display:column property="rank" title="Rank" sortable="true" />
   <display:column property="name" title="Name"  sortable="true" />
   <display:column property="age" title="Age" sortable="true" />
   <display:column property="netWorth" title="Net Worth" sortable="true" />
</display:table>

 

Caption and Footer

<display:caption><span class="label warning">Displaying All Employee Record</span></display:caption> 
  <display:footer>
           Total Employee
           Final Salary Amount
  </display:footer>

Hyper link in column

<display:table export="true"  id="data"  name="custlist" requestURI="/userAction.do" pagesize="10" >
    <display:column  title="Rank" sortable="true" >
	<a href="javascript:showUpdateWindow('UPDATE','${data.id}');" >${id.rank}</a>
    </display:column>
    <display:column property="name" title="Name" sortable="true"  />
    <display:column property="age" title="Age" sortable="true"  />
    <display:column property="netWorth" title="Net worth ($BIL)" sortable="true"  />
</display:table>

 

Inline CSS for column

<display:table  id="data"  name="custlist" requestURI="/userAction.do" pagesize="10" >
            <display:column property="rank" title="Rank" sortable="true"  
style="FONT-SIZE: 14px;font-family: Vegur;color: rgb(0, 0, 0); text-decoration:underline;font-weight:normal"  />
            <display:column property="name" title="Name"  sortable="true" />
            <display:column property="age" title="Age" sortable="true" />
            <display:column property="netWorth" title="Net Worth"  sortable="true" />
</display:table>

 

Outline CSS for column

 <style>
 table, table tr, table tr td
 {
    border: 1px solid gray;
    -moz-border: 1px solid gray;
    -webkit-border: 1px solid gray;
    border-collapse: collapse;
 }
.displayTagtd{
  color:red;
}
 </style>


<display:table id="data" name="custlist" requestURI="/userAction.do" pagesize="10" >
<display:column property="rank" title="Rank" sortable="true"  headerClass="hixTableHeader header" class="displayTagtd"/>
<display:column property="name" title="Name" sortable="true" />
<display:column property="age" title="Age" sortable="true" />
<display:column property="netWorth" title="Net Worth" sortable="true" />
</display:table>

 

Using paramId, propertyName, paramProperty

 

href

The base URL used to construct the dynamic link

paramId

The name of the parameter that gets added to the URL specified above

paramName

Name of the bean that contains the data we want to tack on the the URL (typically null, indicating the current object in the List)

paramProperty

Property to call on the object specified above to return the value that gets tacked onto the URL.

paramScope

Specific scope where the databean lives, typically null

Of these params, you typically would not use paramName and paramScope. Leaving each as null indicates that you want to use the object corresponding to the current row being processed.

 

<display:table name="sessionScope.details">
  <display:column property="id" title="ID" href="details.jsp" paramId="id" />
  <display:column property="email" href="details.jsp" paramId="action" paramName="testparam" paramScope="request" />
  <display:column property="status" href="details.jsp" paramId="id" paramProperty="id" />
</display:table>

 

Replace href with url

 

<display:table name="sessionScope.details">
  <display:column property="id" title="ID" url="details.action" paramId="id" />
  <display:column property="email" url="/details.action" paramId="action" paramName="testparam" paramScope="request" />
  <display:column property="status" url="/details.action" paramId="id" paramProperty="id" />
</display:table>

 

Disable Particular Column Export

If we want to disable the export for the particular column, then need to mention media=”html” for that column as follows. The below column will be not exported

<display:column property="clickHere" title="Click Here" style="width:400px" media="html" />

External References

https://javarevisited.blogspot.com/2011/09/displaytag-examples-tutorial-jsp-struts.html

http://www.displaytag.org/1.2/displaytag/tlddoc/display/column.html