Display Data from Database in JSF Application

This Example demonstrates you how to display data from database in JSF application.

Display Data from Database in JSF Application


This Example demonstrates you how to display data from database in JSF application.

Developing JSF  Application
In this section, we are going to display data from database in JSF based web applications. 

The dataTable tag is used to create table on the page. The component is rendered as an html <table> element. UIColumn child components are responsible for rendering columns of the table. In these columns you can put any type of component like input text box, output text, command button etc.<h:column> tag is used to create column. There can be many column tags within dataTable tag. You can set header and footer in this table. For this <f:facet> tag is used. data table component and its children column component can use header and footer facet.

This section provides you the code to which uses this tag and some of its attributes. It uses backing bean that supplies data to the data table to be rendered to the cells of the columns of the table.

Code Description :

1.Create a web page "data.jsp" for display data.

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>


<h:dataTable id="dt1" value="#{tableBean.perInfoAll}" var="item" bgcolor="#F1F1F1" border="10" cellpadding="5" cellspacing="3" rows="4" width="50%" dir="LTR" frame="hsides" rules="all" summary="This is a JSF code to create dataTable." >

<f:facet name="header">
<h:outputText value="This is 'dataTable' demo" />

<f:facet name="header">
<h:outputText value="First Name" />
<h:outputText style="" value="#{item.firstName}" ></h:outputText>

<f:facet name="header">
<h:outputText value="Last Name"/>
<h:outputText value="#{item.lastName}"></h:outputText>

<f:facet name="header">
<h:outputText value="Username"/>
<h:outputText value="#{item.uname}"></h:outputText>

<f:facet name="footer">
<h:outputText value="The End" />



2. Create a Bean class "TableBean.java". 

package roseindia;
import java.sql.*;
import java.util.*;

public class TableBean {

Connection con ;
Statement ps;
ResultSet rs;
private List perInfoAll = new ArrayList()

public List getperInfoAll() {
 int i = 0;
  con = DriverManager.getConnection("jdbc:mysql://localhost:3306/userdetails",

  ps = con.createStatement();
  rs = ps.executeQuery("select * from user");
  perInfoAll.add(i,new perInfo(rs.getString(1),rs.getString(2)

  catch (Exception e)
  System.out.println("Error Data : " + e.getMessage());
return perInfoAll;

public class perInfo {

String uname;
String firstName;
String lastName;

public perInfo(String firstName,String lastName,String uname) {
this.uname = uname;
this.firstName = firstName;
this.lastName = lastName;


public String getUname() {
return uname;

public String getFirstName() {
return firstName;

public String getLastName() {
return lastName;



3. Mapping for Bean class "faces-config.xml".

<?xml version="1.0"?>



<?xml version="1.0"?> 
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" 




<!-- Faces Servlet -->

<servlet-name>Faces Servlet</servlet-name>
<load-on-startup> 1 </load-on-startup>

<!-- Faces Servlet Mapping -->
<servlet-name>Faces Servlet</servlet-name>


Output : 

Database Table : "user"


Download the application


Share on Google+Share on Google+

Display Data from Database in JSF Application

Posted on: May 24, 2009 If you enjoyed this post then why not add us on Google+? Add us to your Circles



Discuss: Display Data from Database in JSF Application   View All Comments

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
October 15, 2011
DB connect with JSF

June 7, 2012
how does the following thing work

How does value = "#{item.firstName}", "item.lastName" and "item.uname" in the data.jsp file work?? If data is stored in perInfoAll where does this item come into picture??
June 24, 2012

can someone help me I tried this code it works but it displays the data in the database twice thx in advance
subhas bose
September 13, 2012
Excellent simple jsf application

Its very simple to understand and implement. Thank you so much for this.
October 26, 2012
solved compilation error

private List perInfoAll = new ArrayList(); has to be private List<perInfo> perInfoAll = new ArrayList<perInfo>(); otherwise one gets error... and there is missing sql code for users table create database userdetails; use userdetails; create table user(id int not null,fname varchar(20),lname varchar(20),address varcahr(20),primari key(id));