1. h:dataTable
In dataTable, JSF helps you to generate all the HTML table tags.
<h:dataTable value="#{order.orderList}" var="o">
<h:column>
#{o.orderNo}
</h:column>
<h:column>
#{o.productName}
</h:column>
<h:column>
#{o.price}
</h:column>
<h:column>
#{o.qty}
</h:column>
</h:dataTable>
2. ui:repeat
In repeat tag, you have to put all the HTML table tags manually.
<table>
<ui:repeat var="o" value="#{order.orderList}" varStatus="status">
<tr>
<td>#{o.orderNo}</td>
<td>#{o.productName}</td>
<td>#{o.price}</td>
<td>#{o.qty}</td>
</tr>
</ui:repeat>
</table>
ui:repeat example
Here’s a JSF 2.0 ui:repeat example to render exactly the same HTML output like this h:dataTable example. Compare both and spot the different.
JSF…
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core"
>
<h:head>
<h:outputStylesheet library="css" name="table-style.css" />
</h:head>
<h:body>
<h1>JSF 2 ui:repeat tag example</h1>
<table class="order-table">
<tr>
<th class="order-table-header">Order No</th>
<th class="order-table-header">Product Name</th>
<th class="order-table-header">Price</th>
<th class="order-table-header">Quantity</th>
</tr>
<tbody>
<ui:repeat var="o" value="#{order.orderList}" varStatus="status">
<h:panelGroup rendered="#{status.even}">
<tr>
<td class="order-table-even-row">#{o.orderNo}</td>
<td class="order-table-even-row">#{o.productName}</td>
<td class="order-table-even-row">#{o.price}</td>
<td class="order-table-even-row">#{o.qty}</td>
</tr>
</h:panelGroup>
<h:panelGroup rendered="#{status.odd}">
<tr>
<td class="order-table-odd-row">#{o.orderNo}</td>
<td class="order-table-odd-row">#{o.productName}</td>
<td class="order-table-odd-row">#{o.price}</td>
<td class="order-table-odd-row">#{o.qty}</td>
</tr>
</h:panelGroup>
</ui:repeat>
</tbody>
</table>
</h:body>
</html>
Note
You can find the “order” managed bean source code in this h:dataTable example.
You can find the “order” managed bean source code in this h:dataTable example.
The “ui:repeat” tag comes with many helpful attributes like offset, size, status and etc. Make sure you check this JSF ui:repeat javadoc.
Output