paging.banner.full=
src="images/first.gif">{0}>

is used here to set the CSS style for the banner to pagelinks. {1} is a placeholder that represents a link to the first page of data. Here it is being used as the target URL for a clickable image. {2}, {3}, and{4} are placeholders for the previous, next, and last pages, respectively. {0} is a special placeholder that outputs links to a set of numbered pages.

Exporting Data to Excel, PDF, et al.
Getting DisplayTag to export its data to CSV (comma separated value), XML, Excel, PDF, and RTF requires adding a table attribute, setting a number of configuration properties, and creating span styles for each export type.

DisplayTag will display an export banner for tables whose export attribute is set?e.g. .

As with page navigation, there are a large number of export properties to configure. Default properties should be set in the displaytag.properties file. Assuming that you want all of the supported formats to be made available to the user, the properties that are typically modified include export.banner and export.format.filename.

For example, in the sample application, I wanted to enforce right alignment and to apply the pagelinks CSS class to the list of export formats. So, in the displaytag.properties file (see Listing 3), I wrote:

export.banner=
{0}

Less obvious here is that when the export banner is rendered, each export format hyperlink is rendered within a whose class is “export format”?e.g. . Accordingly, the sample application has a CSS class associated with each format, as in:

span.excel {      background-image: url(../images/ico_file_excel.png);      background-repeat: no-repeat;      width: 16px;}

To set the filename of the exported data, modify the export.format.filename properties, as in export.pdf.filename=data.pdf.

Javascript Row Handlers
My last requirement is for rows to be highlighted as the mouse passes over them and, if the user clicks anywhere on a row, a new request is generated that includes a parameter identifying the row that was clicked. To meet this requirement, I need to throw some JavaScript into the mix.

The sample application has a JavaScript file, RowHandlers.js (see Listing 4), with a function called addRowHandlers() that adds three event handlers to each row in an HTML table:

1. onmouseover?Saves the row’s class attribute and then changes it to a new style that has a different background color or image.
2. onmouseout?Restores the previous class attribute.
3. onclick?Jumps to a specified URL and includes a request parameter from the selected table row.

To add RowHandlers.js to your JSP:

1. Link to the script in the section:

2. Invoke addRowHandlers() in the tag’s onload attribute:

Step 2 can be translated as: when the body section of the page has loaded, call the function addRowHandlers(), which will add handlers to each row in the table whose id is row. With the handlers in place, when the user moves the mouse over a row its CSS class attribute is changed to rowMouseOver. When the mouse moves out of a row, its CSS class attribute is set back to its original value. If the user clicks on a row, they are sent to OrderDetail.jsp, where the parameter id (whose value is taken from column 0 of the clicked row) is included in the request.

In the sample application, OrderDetails.jsp (see Listing 1) uses RowHandlers.js as described above. OrderDetails.jsp also employs a little sleight of hand by placing the row id values in a hidden column. This is accomplished by setting the ‘s class and headerClass attributes to hidden, which is a CSS style whose display property is none. This is a simple but effective method for keeping data available in the request scope without having to display it to the user.

DisplayTag is an open-source tag library that makes it easy to display tables of data in JSP’s. And its applicability is almost limitless?from search results that require page navigation to product listings that benefit from column sorting to financial reports that can take advantage of numeric formatting, group subtotals, and PDF export. The list goes on and on, and I am sure that you will find uses for it in your own web application.

So what’s next? Download the sample application and try it out. After that, you can use OrderDetails.jsp as a template for your own dynamic tables. The CSS file, JavaScript file, properties file, and images included in the download can be used as is, or modified as needed to suit the style of your application.