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:

AttributeDescription
idid for the tag
dirDirection for text. Valid values are ltr (left to right) and rtl (right to left).
styleClassCascading stylesheet (CSS) class name
valueA component’s value, typically a value binding
bgcolorBackground color for the table
borderWidth of the table’s border
cellpaddingPadding around table cells
cellspacingSpacing between table cells
columnClassesComma-separated list of CSS classes for columns
firstIndex of the first row shown in the table
footerClassCSS class for the table footer
frameframe surrounding the table should be drawn; valid values: none, above, below, hsides, vsides, lhs, rhs, box, border
headerClassCSS class for the table header
rowClassesComma-separated list of CSS classes for rows
rulesSpecification for lines between cells; valid values: groups, rows, columns, all
summarySummary of the table’s purpose and structure used for non-visual feedback
varThe variable name created by the data table that represents the current item
titleA title used for accessibility. Browsers typically create tooltips for the title’s value
typeType of a link; for example, stylesheet
widthWidth of an element
onblurEvent handler for losing focus
onchangeEvent handler for value changes
onclickEvent handler for Mouse button clicked over the element
ondblclickEvent handler for Mouse button double-clicked
onfocusEvent handler for element received focus
onkeydownEvent handler for Key pressed
onkeypressEvent handler for Key pressed and released
onkeyupEvent handler for Key released
onmousedownEvent handler for Mouse button pressed
onmousemoveEvent handler for mouse moved
onmouseoutEvent handler for mouse left
onmouseoverEvent handler for mouse moved onto
onmouseupEvent 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 Share