Skip to main content

DisplayTag : Create a html grid within five minutes

Posted by survivant on December 17, 2008 at 7:34 AM PST

I found a really nice taglib to generate html table for my JSP  :DisplayTag.  What I like about DisplayTag is that the most common features are buildin : Sort, Pagination, Export to Excel...  Before that I had to do it each time, and it's not really productive and worst.. the code can easily be broke by others developpers.

I'll show you how to create a search page using Struts with Tiles and display the result using DisplayTag. 

Let's start by a screenshot of the result and I'll show you how to reproduce that step by step.


I took Tomcat 4.1 for the demo.  The reason is to take the lowest version of JSTL and JSP just to show you that it can be use on all Webserver.

The source code and the project is available to download here.

Here the steps to do :

#1 - Will be to create a web project.  I won't cover that point.

#2 - Edit web.xml to include DisplayTag and JSTL tags.  Here the complete web.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app
  PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
<web-app id="WebApp_ID">
    <!-- Filter for the export, need that when using Struts and tiles -->
    <!-- Filter mapping for the export -->
    <!--  Struts servlet -->
    <!-- Standard Action Servlet Mapping -->
    <!-- Struts Tag Library Descriptors -->




    <!-- DisplayTag -->
    <!--  JSTL Core Tag -->

If you don't want to export the data you don't need to include the filter.

#3 - Create your Actions if you want to use Struts.  I won't list the files here, but you can check the source code.  Nothing special to explain.

#4 - the fun part. The DisplayTag in the JSP. 

<display:table name="sessionScope.searchResults" export="true" uid="uid" defaultsort="0" defaultorder="descending" requestURI="">
    <display:column sortable="false" media="html" title="" ><c:out value="${uid_rowNum}"/> </display:column>
    <display:column sortable="true" property="name" title="Name" headerClass="sortable"/>
    <display:column sortable="true" property="lastname" title="Lastname" headerClass="sortable"/>
    <display:column sortable="true" property="age" title="Age" headerClass="sortable"/>

That need some explanations. 

In the first line you have to use the field name to tell what is the LIST that contain the data.  Here my demo, I put the list into the session.

The field export is use when you want to allow the data to be exported.

The field uid is needed when you want to generate a unique id for each row.

The fields defaultsort and defaultorder are used for sorting

The field requestURI is important when you sort the data.  You need to tell to DisplayTag where the request will be forwarded after sorting the data.  If you are using Tiles, you need an action that will forward to the JSP.  That was the tricky part.

After that you select which columns to show for your table and which column you want to be sortable.  One particular field is media.  You select where you want to show this column.  If you put media="html" it will be displayed in the browser, but won't be exported.  If you put media="html pdf" it will be displayed and exported but only for pdf. 

#5 - sorry no #5.  It's not more complicated than that.  You can customize the css of DisplayTag of course. 

For more details start by looking at the source code and for DisplayTag documentation go here.

The next step should be to create a jMaki widget to do the same thing.. maybe another time.


Related Topics >>