RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Creating Highly Functional Tables in JSP Using DisplayTag and JavaScript

Every Web developer has to tangle with tables. A new open source library, DisplayTag, can make life with tables much more organized. Find out how to combine the DisplayTag library with JavaScript to make a slick app that displays line item details.

isplaying data in a table is everyday work for Web application developers. In this 10-minute solution, you will learn how to quickly create feature-rich tables for your JSP pages using the DisplayTag library and a little JavaScript. Specifically, the table features that we want include:
  • Alternating row colors
  • Column sorting and formatting
  • Row-grouping with subtotals for selected columns
  • Page navigation
  • Export to XML, Excel, PDF, and CSV
  • Support for standard JSP and the Expression Language (EL)
  • Row interactivity—a row is highlighted as the mouse passes over it, and if the user clicks anywhere on the row, a new request is generated that includes a parameter indicating which row was clicked.
This article includes a sample application called DisplayTagEx that displays line item details for multiple orders. (View a live demo of DisplayTagEx. A screen shot can be found in Figure 1.) Line items are grouped by order and subtotals are provided for each group. Clicking anywhere on a row takes the user to a page with more complete information about the selected item.
Figure 1. A Better Table: DisplayTagEx uses the DisplayTag library and a little JavaScript.
Listings 1 and 2 contain the source for OrderDetails.jsp and displaytagex.css, respectively.

The specific environment used to develop and deploy the article's sample application was DisplayTag library v1.1, JDK 5.0, MyEclipse 4.1, and Tomcat 5.5. However, the steps described in this article apply to any JSP developer looking to add data tables to his or her web application.

You want to quickly add feature-rich data tables to your JSP web application.

Use the open source DisplayTag library and add in a little JavaScript.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date