Datatable in JSF

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 w3spoint
 */
@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 w3spoint
 */
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.

Please follow and like us: