Jsf Datatable example

Requirements

Project structure:
Jsf datatable project structure

Edit the web.xml file,

<?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_3_0.xsd"
	id="WebApp_ID" version="3.0">
	<display-name>DataTableJsf</display-name>
	<welcome-file-list>
		<welcome-file>index.xhtml</welcome-file>
	</welcome-file-list>
	<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>
</web-app>

Edit the faces-config.xml file,

<?xml version="1.0" encoding="UTF-8"?>

<faces-config 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-facesconfig_2_0.xsd"
	version="2.0">
	<managed-bean>
		<managed-bean-name>emp</managed-bean-name>
		<managed-bean-class>in.javadomain.Bean.EmpDetailsList</managed-bean-class>
		<managed-bean-scope>session</managed-bean-scope>
	</managed-bean>
</faces-config>

Create a Bean class (EmpDetailsList) and paste the below code,

package in.javadomain.Bean;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class EmpDetailsList {

	private static final empDetail[] empList = new empDetail[] {

	new empDetail("100", "Naveen", 5000), new empDetail("101", "Divya", 9000),
			new empDetail("102", "Hems", 6000),
			new empDetail("103", "Rvs", 11000),
			new empDetail("104", "Chudar", 7000) };

	public empDetail[] getempList() {
		return empList;
	}

	public static class empDetail {

		String empId;
		String empName;
		int empSalary;

		public empDetail(String employeeId, String employeeName,
				int employeeSalary) {

			this.empId = employeeId;
			this.empName = employeeName;
			this.empSalary = employeeSalary;
		}

		public String getEmpId() {
			return empId;
		}

		public void setEmpId(String empId) {
			this.empId = empId;
		}

		public String getEmpName() {
			return empName;
		}

		public void setEmpName(String empName) {
			this.empName = empName;
		}

		public int getEmpSalary() {
			return empSalary;
		}

		public void setEmpSalary(int empSalary) {
			this.empSalary = empSalary;
		}

	}
}

Create a DataTable.xhtml file and paste the below code,

<?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:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

<h:body>
	<h:form>
		<h:dataTable value="#{emp.empList}" var="dt">
			<h:column>
				<f:facet name="header">Employee Id</f:facet>
				#{dt.empId}
			</h:column>

			<h:column>
				<f:facet name="header">Employee Name</f:facet>
				#{dt.empName}
			</h:column>

			<h:column>
				<f:facet name="header">Employee Salary</f:facet>
				#{dt.empSalary}
			</h:column>
		</h:dataTable>
	</h:form>
</h:body>
</html>

Run the DataTable.xhtml (right click on this fle -> Run as -> Run On server).

 Note:Ensure you have created the server already. 

Output:

Jsf Datable Output

Download the Source code:

DataTableJsf

Recommended Jsf Books:

585 total views, 2 views today

Leave a Reply

Your email address will not be published. Required fields are marked *