Java Tutorial Blog

JSF 2 DataTable Delete Row Example

//  by 

In JSF 2.2 the manipulation of Data Table has been never easier and specifically when it comes to finding out which row the user selected for removal. In JSF 2.2 the removing happened without using of passed parameters or binding the DataTable component into its corresponding Java Object – Like HTMLDataTable – for being manipulated from there. Simply what you have to do is to identify your Plain Old Java Object (POJO) by overriding the equals and pass the object being removed into the remove method. This tutorial highlights the simple example for how to delete a row in datatable.

1. Student POJO

Student.java

package net.javabeat.jsf.data;

public class Student {
	private String name;
	private String major;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}

	public String getMajor() {
		return major;
	}
	public void setMajor(String major) {
		this.major = major;
	}

	public boolean equals(Object obj){
		// The identification here is through of using the name of the student
		if(obj instanceof Student){
			if(this.name.equals(((Student)obj).getName())){
				return true;
			}
		}
		return false;
	}
}

2. Managed Bean

RegisterBean.java

package net.javabeat.jsf;

import java.util.ArrayList;
import java.util.List;

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

import net.javabeat.jsf.data.Student;

@ManagedBean
@SessionScoped
public class RegisterBean {
	private Student student = new Student();
	private List<Student> students = new ArrayList<Student>();
	public Student getStudent() {
		return student;
	}
	public void setStudent(Student student) {
		this.student = student;
	}
	public List<Student> getStudents() {
		return students;
	}
	public void setStudents(List<Student> students) {
		this.students = students;
	}

	public String addStudent(){
		this.students.add(student);
		this.student = new Student();
		return "";
	}

	public String delete(Student std){
		this.students.remove(std);
		return "";
	}
}

3. The View

index.xhtml

<!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:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
	<f:view>
		<h:form>
			<h1>JavaBeat JSF 2.2 Examples</h1>
			<h2>JSF2 DataTable - Deleting Rows Example</h2>
			<h:panelGrid columns="2" border="1">
				<h:outputText value="Enter Student Name:"/>
				<h:inputText value="#{registerBean.student.name}"/>
				<h:outputText value="Enter Student Major:"/>
				<h:inputText value="#{registerBean.student.major}"/>
			</h:panelGrid>
			<br/>
			<h:commandButton value="Add Student" action="#{registerBean.addStudent}"/>
			<br/>
			<br/>
			<h:dataTable value="#{registerBean.students}" var="student" border="1">
				<h:column>
					<f:facet name="header">
						<h:outputText value="Student Name"/>
					</f:facet>
					<h:outputText value="#{student.name}"/>
				</h:column>
				<h:column>
					<f:facet name="header">
						<h:outputText value="Student Major"/>
					</f:facet>
					<h:outputText value="#{student.major}"/>
				</h:column>
				<h:column>
					<f:facet name="header">
						<h:outputText value="Delete Student"/>
					</f:facet>
					<h:commandLink value="Delete" action="#{registerBean.delete(student)}"/>
				</h:column>
			</h:dataTable>
		</h:form>
	</f:view>
</html>

3. Faces Configuration File

faces-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
	version="2.2">
<application>
	<resource-bundle>
		<base-name>net.javabeat.jsf.application</base-name>
		<var>msg</var>
	</resource-bundle>
</application>
</faces-config>

4. The Deployment Descriptor

web.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_2_5.xsd"
	id="WebApp_ID" version="2.5" metadata-complete="true">
	<context-param>
		<description>State saving method: 'client' or 'server'
						(=default). See JSF Specification 2.5.2
		</description>
		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
		<param-value>server</param-value>
	</context-param>
	<context-param>
		<param-name>javax.faces.application.CONFIG_FILES</param-name>
		<param-value>/WEB-INF/faces-config.xml</param-value>
	</context-param>
	<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>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
	<listener>
		<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
	</listener>
</web-app>

5. JSF DataTable Delete Row Demo

The below snapshot, shows you the using of the newly feature added for removing the rows from a data table using the passing pojo java object directly into the method that responsible of removal operation.

JSF 2 Deleting Rows Example 2

  • The admins can add whatever students they want.

JSF 2 Deleting Rows Example 2

  • The admins can remove whatever students they want.
  • The deletion process has assumed that the uniqueness is covered through the name of the student. However, you have ability to consider whatever kind of identification. But consider the needs to override the equals method in the Student.
[wpdm_file id=51]

About Amr Mohammed