Site icon NgDeveloper

Jsf Datatable example

Mirthbees

Requirements

Project structure:

Edit the web.xml file,

[xml]
<?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>
[/xml]

Edit the faces-config.xml file,
[xml]
<?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>
[/xml]

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

[java]
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;
}

}
}
[/java]

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

[html]
<?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>
[/html]

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

[plain gutter=”false”] Note:Ensure you have created the server already. [/plain]

Output:

Download the Source code:

DataTableJsf

Recommended Jsf Books:

Exit mobile version