Wednesday, September 21, 2011

10 examples of displaytag in JSP, Struts and Spring

Display tag is one of the best free open source library for showing data in tabular format in a J2EE application using jsp, struts or spring. it is shipped as tag library so you can just include this  in your jsp and add corresponding jar and there dependency in class-path and you are ready to use it. Display tag is my favorite solution for displaying any tabular data because of its inherent capability on paging and sorting. It provides great support for pagination by its own but it also allows you to implement your own pagination solution. On Sorting front you can sort your data based on any column, implement default sorting etc.

display tag examples in jspThere is so much resource available on using display tag including examples, demos and guides. In this article we will see some important points to note while using display tag in jsp. Though this library is very stable and rich in functionality still there are some subtle things which matters and if you don't know you could potentially waste hours to fix those things. These are the points I found out while I was using displaytag in my project and I have listed those down here for benefits of all.

displaytag examples
I have outlined all the examples based upon task I had to perform and due to those tasks I discovered and get myself familiar with displaytag. It’s my personal opinion that task based approach works better in terms of understanding something than feature based. It’s simply easy for mind to understand problem first and then solution.

1) Provide UID while using two tables in one page.
In many scenarios we need to show two separate tables in one jsp page. We can do this by using two tag easily but the catch is that sorting will not work as expected. When you sort one table, second table will automatically sort or vice-versa. To make two tables independent of each other for functionality like exporting and sorting you need to provide "uid" attribute to table tag as shown below. I accidentally found this when I encounter sorting issue on display tag.

<displaytag:table name="listofStocks" id="current_row" export="true" uid="1">
<displaytag:table name="listofStockExchanges" id="current_row" export="true" uid="2">

just make sure "uid" should be different for each table.
 


2) Displaytag paging request starts with "d-"
There was bug in one of our jsp which shows data using displatag, with each paging request it was reloading data which was making it slow. Then we thought to filter out displaytag paging request and upon looking the pattern of displaytag paging request we found that it always starts with "d-", so by using this information you can filter out display tags paging request. Since we were using spring it was even easier as shown in below

Example:

Map stockParamMap = WebUtils.getParametersStartingWith(request, "d-");
if(stockParamMap.size() !=0){
out.println("This request is displaytag pagination request");
}

3) Getting reference of current row in displaytag
Many times we require reference of current row while rendering display tag data into jsp page. In our case we need to get something from currentRow and then get Something from another Map whose key was value retrieved from current row, to implement this of course we some how need reference of current row in display tag. After looking online and displaytag.org we found that by using "id" attribute we can make current row reference available in pageScope. Name of variable would be the value of "id" attribute, this would be much clear by seeing below example:


<displaytag:table name="pennyStocks" id="current_penny_stock" export="true" uid="1">
<di:column title="Stock Price" value="${pennyStockPrice[current_penny_stock.RIC]}" sortable="true" />

This way we are displaying stock price from pennyStockPrice Map whose key was RIC(Reuters Information Code) of penny Stock. You see name of variable used to refer current row is "current_penny_stock"

4) Formatting date in displaytag in JSP
Formatting date and numbers are extremely easy in display tag, you just need to specify a "format" attribute with <displaytag:column> tag and value of this tag would be date format as we used in SimpleDateFormat in Java. In Below example I am showing date in "yyyy-MM-dd" format.


<di:column title="Stock Settlement Date" property="settlementDate" sortable="true" format="{0,date,yyyy-MM-dd}" />

You can also implement your own table decorator or column decorator but I found this option easy and ready to use.


5) Sorting Columns in display tag
Again very easy you just need to specify sortable="true" with <displaytag:column> tag and display tag will make that column sortable. Here is an example of sortable column in display tag.

<di:column title="Stock Price" property="stockPrice" sortable="true" />


6) Making a column link and passing its value as request parameter.
Some time we need to make a particular columns value as link may be to show another set of data related to that value. we can do this easily in display tags by using "href" attribute of <displaytag:column> tag, value of this attribute should be path to target url.If you want to pass value as request parameter you can do that by using another attribute called "paramId", which would become name of request parameter.

Here is example of making link and passing value as request parameter in displaytags.

<di:column property="stockSymbol"  sortable="true" href="details.jsp" paramId="symbol"/>

Values on this column will appear as link and when user click on the link it will append a request parameter "symbol" e.g symbol=Sony


7) Default sorting and ordering in displaytag
If you want that your table data is by default sorted based upon a particular column when displayed than you need to defaine a column name for default sorting and an order e.g. ascending or descending. You can achieve this by using attribute "defaultsort" and "defaultorder" of <displaytag:table> tag as shown in below example.

<displaytag:table name="pennyStocks" id="current_penny_stock" export="true" defaultsort="1" defaultorder="descending" uid="1">


This will display table which would be sorted on first column in descending order.

8) Sorting whole list data as compared to only page data in display tag
This was the issue we found once we done with our displaytag jsp. we found that whenever we sort the table by clicking on any sortable column header it only sort the data visible in that page, it was not sorting the whole list provided to display tag I mean data which was on other pages was left out. That was not the desirable action for us. Upon looking around we found that display tag by default sort only current page data but you can override this behavior by providing a displaytag.properties file in classpath and including below line in

displaytag.properties:
sort.amount = list

9) Configuring displaytag by using displaytag.properties
This was important piece of information which we are not aware until we hit by above mentioned issue. Later we found that we can use displaytag.properties to customize different behaviours, appearence of displaytag. Another good behavior we discoved was showing empty table if provided list is null or empty. You can achieve this by adding line "basic.empty.showtable = true". Here was how our properties file look like


//displaytag.properties
sort.amount = list
basic.empty.showtable = true
basic.msg.empty_list=No results matched your criteria.
paging.banner.placement=top

10) Specifying pagesize for paging in a JSP
You can specify how many rows you want to shwo in one page by using "pagesize" attribute of <displaytag:table>. We prefer to use it from configuraiton because this was subject to change.

Overall we found that displaytag was quite rich in functionality, easy to use and highly configurable. Displaytag is also very extensible in terms of customizing export or pagination functionality. Displaytag.org has some very good examples and live demo addressing each of display tag functionality and those are excellent starting point as well. No matter whether you are using struts, spring or plain sevlet based framework for tabular data displaytag is a good choice.

Note: In <displaytag:table> displaytag is tag prefix I used in while declaring tag library using <@taglib> in JSP.

Related Java Tutorials

10 comments :

Anonymous said...

You have summarized your experience quite well. these are almost set of feature from displaytag a user needs to know and often required in web application.

Pooja said...

Can you please share example of how to do paging in display tag both internal paging without database and external paging with database ?

Thanks
Pooja

lalitha said...

How can we format the data correctly by using style attribute of display tag library? can some body suggest more information on style attribute that is what values can be given for style attribute in display tag library?
Like white-space:nowrap etc..

Neeraj Kumar said...

Thanks Sir, this article is really very useful and helpful to me. It reduces lots of my headache. I am start to use display tag one day ago and face lots of problem. I was read lots of articles but i cann't understand clearly what they want to say because of there heavy words used in their language. If possible then pls give an example which explain or cover maximum attributes or properties of Display tag.

Anonymous said...

hi ,

i am trying to freeze the title in display tag like excel while scrolling but i didn't find it please help to solve that issue..its urgent.

Thanks,
Aravindh

Gautam said...

Hello Javin, we faced an strange issue with two display table in one page, we have similar setup as shown in first example, but current_row exported by id attribute was always null. After trial and error ,we found that we are using both uid and id attribute, which conflict each other. It means if you use uid then no need to use id, as current row will be available on uid as $(uid). That was tricky issue to figure out :)

Gaurav said...

@lalitha, I think style attribute is to provide custom CSS properties to a particular display tag. I am sure you can provide anything, which is possible with normal style attribute with any HTML tag.

Gauri said...

Hi Javin, How to format date and time in display tag? Can you please give an example of that? We have one column which contains date in format dd-MM-yyyy AM or PM, because of this AM and PM format, we are not able to sort rows correctly, when clicked on date column. Can you please help there?

Anonymous said...

Amazing tutorial Sir, Your date format example in display tag has helped me a lot, but I am facing an issue, I need to format both date and time e.g. my dates are in 11/08/2013 09:30:14 PM format, but when I sort table by date column, it is not sorting right as per AM and PM value. AM should come before PM in ascending order, but it's not happening, Can you please help?

Lanka Pani said...

Hi , I am using displaytag for pagination and sorting lists with external soting; both of them works well independently; but I have a new requirement like to sort only the current page items when we click column header, right now in my case if I am in page 5 and clicks any column header it's navigating to page 1 every time, I need to stay in page 5 only in the above case, could you please suggest me a solution for that

Post a Comment