• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JSF 2 DataTable Example

March 23, 2014 //  by Amr Mohammed

The h:dataTable is one of the most important component that’s coming from the starting of JSF page. JSF 2 support the using of h:dataTable by means of iterating a list of data that’s filled inside a bean’s list to create an HTML table. The most important attribute at the h:dataTable is the value attribute that represents the data over which h:dataTable iterates; the data must be one of the following types:

  • A Java Object (it’s not matter, cause the h:dataTable will iterate once if that object is scalar – not  collection- making the object available in the body of the tag.
  • An Array.
  • An instance of java.util.List
  • An instance of java.sql.ResultSet
  • An instance of javax.servlet.jsp.jstl.sql.Result
  • An instance of javax.faces.model.DataModel.

At this post we would be introducing a simple h:dataTable that’s connected with an instance of Array. As h:dataTable iterates, it makes each item in the array, list, resultSet, etc., available within the body of the tag. The name of the item is specified with an h:dataTable’s var attribute.

Also Read:

  • JSF 2 Tutorials
  • JSF Tutorials
  • Introduction to JSF

The h:dataTable component can contain only h:column and it will discard all other component, but the h:column is capable of rendering an unlimited number of the components. The h:dataTable component provides the developer capability of adding a header and footer for the dataTable that’s being created.

1. Managed Bean

SimpleDataTableBean

package net.javabeat.jsf;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class SimpleDataTableBean {

	private List<Tutorial> tutorials = new ArrayList<Tutorial>();

	public SimpleDataTableBean() {
		this.tutorials.add(new Tutorial(1, "JSF 2"));
		this.tutorials.add(new Tutorial(2, "EclipseLink"));
		this.tutorials.add(new Tutorial(3, "HTML 5"));
		this.tutorials.add(new Tutorial(4, "Spring"));
	}

	public String register() {
		return "registrationInfo";
	}

	public List<Tutorial> getTutorials() {
		return tutorials;
	}

	public void setTutorials(List<Tutorial> tutorials) {
		this.tutorials = tutorials;
	}
}

2. Tutorial Class

Tutorial.java

package net.javabeat.jsf;

public class Tutorial {
	private int tutorialId;
	private String tutorialDescription;

	public Tutorial(int id, String desc){
		this.tutorialId = id;
		this.tutorialDescription = desc;
	}

	public int getTutorialId() {
		return tutorialId;
	}
	public void setTutorialId(int tutorialId) {
		this.tutorialId = tutorialId;
	}
	public String getTutorialDescription() {
		return tutorialDescription;
	}
	public void setTutorialDescription(String tutorialDescription) {
		this.tutorialDescription = tutorialDescription;
	}
}

3. The Views

simpleDataTable.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:form>
	<h1>
		<h:outputText value="JavaBeat JSF 2.2 Examples" />
	</h1>
	<h2>
		<h:outputText value="dataTable Example" />
	</h2>
	<h:outputText value="JavaBeat Site Provides the Following Tutorials:"/>
	<br/>
	<h:dataTable value="#{simpleDataTableBean.tutorials}" var="tutorial" border="1">
		<h:column>
			<f:facet name="header">
				<h:outputText value="Tutorial ID"/>
			</f:facet>
			<h:outputText value="#{tutorial.tutorialId}"/>
			<f:facet name="footer">
				<h:outputText value="Tutorial ID"/>
			</f:facet>
		</h:column>
		<h:column>
			<f:facet name="header">
				<h:outputText value="Tutorial Description"/>
			</f:facet>
			<h:outputText value="#{tutorial.tutorialDescription}"/>
			<f:facet name="footer">
				<h:outputText value="Tutorial Description"/>
			</f:facet>
		</h:column>
	</h:dataTable>
</h:form>
</html>

4. The Deployment Descriptor

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5" metadata-complete="true">
	<context-param>
		<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
		<param-value>client</param-value>
	</context-param>
	<context-param>
		<param-name>javax.faces.application.CONFIG_FILES</param-name>
		<param-value>/WEB-INF/faces-config.xml</param-value>
	</context-param>
	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>/faces/*</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
	<listener>
		<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
	</listener>
</web-app>

5. JSF 2 DataTable Demo

The below snapshot shows you the complete example of using an h:dataTable with its header and footer caption. The snapshot should demonstrate the concept of associate an h:dataTable component with a simple list of Tutorial object and using the concept of var reference for accessing the records inside the body of the h:dataTable.

JSF 2 DataTable Example

[wpdm_file id=10]

Category: JSFTag: JSF 2

About Amr Mohammed

Previous Post: « JSF 2 SelectOneRadio Example
Next Post: JSF 2 Repeat Example »

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

How to Use Optional.ofNullable() Method in Java

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact