JSF Tutorial - JSF DataTable Update Example

The following code shows how to update a DataTable.


The following code is from UserBean.java.

package com.java2s.common;
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;
public class UserBean implements Serializable{
  private static final long serialVersionUID = 1L;
  private static final ArrayList<Book> bookList = 
    new ArrayList<Book>(Arrays.asList(
    new Book("1", "CSS", new BigDecimal("722.22"), 1),
    new Book("2", "HTML", new BigDecimal("533.33"), 2),
    new Book("3", "Java", new BigDecimal("11444.44"), 8),
    new Book("4", "Javascript", new BigDecimal("5255.55"), 3),
    new Book("5", "SQL",new BigDecimal("166.66"), 10)
  public ArrayList<Book> getBookList() {
    return bookList;
  public String saveAction() {
    //get all existing value but set "editable" to false 
    for (Book book : bookList){
    //return to current page
    return null;
  public String editAction(Book book) {
    return null;
  public static class Book{
    String bookNo;
    String productName;
    BigDecimal price;
    int qty;
    boolean editable;

    public Book(String bookNo, String productName, BigDecimal price, int qty) {
      this.bookNo = bookNo;
      this.productName = productName;
      this.price = price;
      this.qty = qty;
    public boolean isEditable() {
      return editable;
    public void setEditable(boolean editable) {
      this.editable = editable;
    public String getBookNo() {
      return bookNo;
    public void setBookNo(String bookNo) {
      this.bookNo = bookNo;
    public String getProductName() {
      return productName;
    public void setProductName(String productName) {
      this.productName = productName;
    public BigDecimal getPrice() {
      return price;
    public void setPrice(BigDecimal price) {
      this.price = price;
    public int getQty() {
      return qty;
    public void setQty(int qty) {
      this.qty = qty;

The following code is from demo.xhtml.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<html xmlns="http://www.w3.org/1999/xhtml"   
      <h:outputStylesheet library="css" name="table-style.css"  />
      <h1>JSF 2 dataTable example</h1>
        <h:dataTable value="#{book.bookList}" var="o"

            <f:facet name="header">Book No</f:facet>
            <h:inputText value="#{o.bookNo}" size="10" rendered="#{o.editable}" />
            <h:outputText value="#{o.bookNo}" rendered="#{not o.editable}" />
            <f:facet name="header">Product Name</f:facet>
            <h:inputText value="#{o.productName}" size="20" rendered="#{o.editable}" />
            <h:outputText value="#{o.productName}" rendered="#{not o.editable}" />
            <f:facet name="header">Price</f:facet>
            <h:inputText value="#{o.price}" size="10" rendered="#{o.editable}" />
            <h:outputText value="#{o.price}" rendered="#{not o.editable}" />
            <f:facet name="header">Quantity</f:facet>
            <h:inputText value="#{o.qty}" size="5" rendered="#{o.editable}" />
            <h:outputText value="#{o.qty}" rendered="#{not o.editable}" />
            <f:facet name="header">Action</f:facet>
            <h:commandLink value="Edit" action="#{book.editAction(o)}" rendered="#{not o.editable}" />

        <h:commandButton value="Save Changes" action="#{book.saveAction}" />

The following code is from table-style.css.

  bbook-bottom:1px solid #BBB;

  bbook-top:1px solid #BBB;

  bbook-top:1px solid #BBB;

Download DataTable_Update.zip


Copy the generated WAR file from the target folder to Tomcat deployment folder and run Tomcat-Install-folder/bin/startup.bat.

After Tomcat finish starting, type the following URL in the browser address bar.