Introduction
JSF provides a rich control named DataTable to render and format HTML tables.
- To display data, a data table can loop through a set of values or an array of values.
- DataTable offers attributes to modify its data easily.
The <h:dataTable> tag is used to create a data table in JSF.
Implementation
Follow these steps to put the example application into practice.
- Create a demo project in any IDE that supports Java Web applications, such as NetBeans. We will use the Apache Netbeans IDE for the following implementation program.
- Choose the project type as a web application under the Java with Maven category.
- Pick any practical name for your project and packages.
- Select Java EE 7 web along with the GlassFish Server.
- Right-click the project name in the project window's folder section, then select Properties.
- Add the Java Server Faces framework under the frameworks tab.
- Make a Java-managed bean class file called "StudentBean.java" in the "source packages->com.mycompany.myproject" folder.
- Modify the “index.xhtml,” "StudentBean.java", and other files as given below.
- To check if the application is being compiled in the previously configured environment, compile and run it.
- Create the web application and deploy it using the GlassFish server as a war file. The default browser should display the output after program execution.
Folder Structure
As was mentioned above, the folder structure should resemble the image below.
(Folder structure of JSF web application)
Code
StudentBean.java:
package com.mycompany.demoproject;
import java.io.Serializable;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Arrays;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="student")
@SessionScoped
public class StudentBean implements Serializable{
private static final long serialVersionUID = 1L;
private static final ArrayList<Student> studentList =
new ArrayList<>(Arrays.asList(
new Student("200465", "Arpita Priyadarsini",
new BigDecimal("156.60"), 1),
new Student("200466", "Bijay Kumar",
new BigDecimal("175.00"), 2),
new Student("200467", "Fiza Afreen",
new BigDecimal("168.00"), 8),
new Student("200468", "Anoushka Karkoon",
new BigDecimal("163.70"), 3),
new Student("200469", "Arpita Kumari",
new BigDecimal("170.00"), 10)
));
public ArrayList<Student> getStudentList() {
return studentList;
}
public String deleteAction(Student student) {
studentList.remove(student);
return null;
}
public static class Student{
String studentId;
String studentName;
BigDecimal height;
int rank;
public Student(String studentId, String studentName,
BigDecimal height, int rank) {
this.studentId = studentId;
this.studentName = studentName;
this.height = height;
this.rank = rank;
}
public String getStudentId() {
return studentId;
}
public void setStudentId(String studentId) {
this.studentId = studentId;
}
public String getStudentName() {
return studentName;
}
public void setStudentName(String studentName) {
this.studentName = studentName;
}
public BigDecimal getHeight() {
return height;
}
public void setHeight(BigDecimal height) {
this.height = height;
}
public int getRank() {
return rank;
}
public void setRank(int rank) {
this.rank = rank;
}
}
}index.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>Delete Data from Data Table</title>
</h:head>
<h:body>
<h1>Demonstration of Data from Data Table in JSF</h1>
<h:form>
<h:dataTable value="#{student.studentList}" var="s">
<h:column>
<f:facet name="header">Student ID</f:facet>
#{s.studentId}
</h:column>
<h:column>
<f:facet name="header">Student Name</f:facet>
#{s.studentName}
</h:column>
<h:column>
<f:facet name="header">Height</f:facet>
#{s.height}
</h:column>
<h:column>
<f:facet name="header">Student Rank</f:facet>
#{s.rank}
</h:column>
<h:column>
<f:facet name="header">Action</f:facet>
<h:commandLink value="Delete" action="#{student.deleteAction(s)}" />
</h:column>
</h:dataTable>
</h:form>
</h:body>
</html>Output 1 (Before Clicking the Delete Button)
Output 2 (After Clicking the Delete Button)
7+ registered 
