Datatable in JSF

by

JSF dataTable:

JSF h:dataTable tag is used to render and format HTML table element. It is a rich control tag which can iterate collection or array of values to display data in table format. It also provides attributes to manipulate table data in easy way.

Attributes:

Attribute Description
id id for the tag
dir Direction for text. Valid values are ltr (left to right) and rtl (right to left).
styleClass Cascading stylesheet (CSS) class name
value A component’s value, typically a value binding
bgcolor Background color for the table
border Width of the table’s border
cellpadding Padding around table cells
cellspacing Spacing between table cells
columnClasses Comma-separated list of CSS classes for columns
first Index of the first row shown in the table
footerClass CSS class for the table footer
frame frame surrounding the table should be drawn; valid values: none, above, below, hsides, vsides, lhs, rhs, box, border
headerClass CSS class for the table header
rowClasses Comma-separated list of CSS classes for rows
rules Specification for lines between cells; valid values: groups, rows, columns, all
summary Summary of the table’s purpose and structure used for non-visual feedback
var The variable name created by the data table that represents the current item
title A title used for accessibility. Browsers typically create tooltips for the title’s value
type Type of a link; for example, stylesheet
width Width of an element
onblur Event handler for losing focus
onchange Event handler for value changes
onclick Event handler for Mouse button clicked over the element
ondblclick Event handler for Mouse button double-clicked
onfocus Event handler for element received focus
onkeydown Event handler for Key pressed
onkeypress Event handler for Key pressed and released
onkeyup Event handler for Key released
onmousedown Event handler for Mouse button pressed
onmousemove Event handler for mouse moved
onmouseout Event handler for mouse left
onmouseover Event handler for mouse moved onto
onmouseup Event handler for mouse button released

 

Example:

test.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
	<h:head>
		<title>JSF display data table example.</title>
	</h:head>
    <h:body>
    	<h2>JSF display data table example.</h2>
    	<h:form>
      <h:dataTable value="#{test.students}" var="student">
         <h:column>    				
            <f:facet name="header">Name</f:facet>    				
            #{student.name}
         </h:column>
         <h:column>
            <f:facet name="header">Class</f:facet>
            #{student.stuClass}
         </h:column>
         <h:column>
            <f:facet name="header">RollNo</f:facet>
            #{student.rollNo}
         </h:column>
        <h:column>
            <f:facet name="header">Age</f:facet>
            #{student.age}
         </h:column>
      </h:dataTable>
   </h:form>
    </h:body>
 
</html>

Test.java

import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
/**
 * Backing bean.
 * @author w3schools
 */
@ManagedBean(name = "test")
@SessionScoped
public class Test {
	private List<Student> studentList;
	public List<Student> getStudents(){
		studentList = new ArrayList<Student>();
		studentList.add(new 
				Student("Vivek","MCA 3rd","MCA/07/40",29));
		studentList.add(new 
				Student("Sunil","MCA 3rd","MCA/07/41",33));
		studentList.add(new 
				Student("Bharat","MCA 3rd","MCA/07/42",27));
		studentList.add(new 
				Student("Richi","MCA 3rd","MCA/07/43",28));
		studentList.add(new 
				Student("Sahdev","MCA 3rd","MCA/07/44",28));
		return studentList;
	}
 
}

Student.java

/**
 * Managed Bean.
 * @author w3schools
 */
public class Student {
	private String name;
	private String stuClass;
	private String rollNo;
	private int age;	
 
	public Student(String name, 
			String stuClass, String rollNo, int age) {
		this.age = age;
		this.name = name;
		this.rollNo = rollNo;
		this.stuClass = stuClass;
	}
 
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getStuClass() {
		return stuClass;
	}
	public void setStuClass(String stuClass) {
		this.stuClass = stuClass;
	}
	public String getRollNo() {
		return rollNo;
	}
	public void setRollNo(String rollNo) {
		this.rollNo = rollNo;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
}

faces-config.xml

<?xml version="1.0" encoding="windows-1252"?>
<faces-config version="2.0" 
xmlns="http://java.sun.com/xml/ns/javaee" 
xmlns:xi="http://www.w3.org/2001/XInclude" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">
 
</faces-config>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
    	xmlns="http://java.sun.com/xml/ns/javaee" 
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    	http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
 
    <servlet>
        <servlet-name>faces</servlet-name>
        <servlet-class>
         javax.faces.webapp.FacesServlet
	<servlet-mapping>
        <servlet-name>faces</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
 
</web-app>

URL:

http://localhost:7001/JSFExample41/faces/test.xhtml

Output:

JSF example41-1
 
Download this example.