JSF 2 repeat tag example
The ui:repeat
is always uses as an alternative to h:dataTable
, to loop over array or list to display the data in HTML table format. See following examples :
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
Download Source Code
Download It – JSF-2-Repeat-Tag-Example.zip (10KB)
Thanks!
thanks for the great example.
the reference doc link is broken. can you elaborate on the varStatus variable?
1. Reference link is updated, look all JSF doc are moved to Oracle, thanks for report.
2. For varStatus, means it give a shortname to = the value. For example,
The “status” is refer to “#{order.orderList}”
varStatus…..
Isn’t it the index of the list?
I think you mean “var” in your example.
is it possible to iterate in reverse order? With out changing the java code.
Hi Yong,
Could you please put some example of how to iterate two dimensional array of string using ui:repeat. I want to show some db table table on user interface.
Thanks
why it removes my tags…… i mean use simple #{status.odd ? ‘order-table-odd-row’ : ‘
order-table-even-row’} for the css class setter
you’re cool Mr mkyong
How I can inport the library of this URI: “http://java.sun.com/jsf/facelets”?
Hi Mkyong, what are the differences between ui:repeat, h:datatable and c:foreach? When would you choose one over the other?
thanx
First of all…. ui:repeat and c:foreach are TagHandlers which participate only before the view has rendered and then they dissapear from the document. h:datatable is a component which renders to the document.
On the other hand, ui:repeat and c:foreach are cycle structures and h:datatable is a component that allows you to create an HTML table.
I hope this helps….
Is there any way to update ui:repeat component once some ajax call is completed?
I’m submitting a form and after that i will populate the list.
Since, i dont want to see repeated row values in one column, can we hide the row values of same content repeated and just display one row and rest empty or blank in a rich:datatable or h:datatable column?
ui:repeat Tag is not new to JSF 2.0. It is since JSF 1.2.
Thanks for your input.
why not simple use ?
#{o.orderNo}
#{o.productName}
#{o.price}
#{o.qty}
and stop repeating yourself 🙂