A realistic problem:How to show 3 records in one row by rich:datatable?


I am developing a web like
http://www.360buy.com/ or http://www.newegg.com/

As you can see, those webs shows 3 records in one row.

I tryied jstl's c:forEach, but it's too slow to show page contains images.

If i show one record per row by rich:datatable, the speed is ok.

Now, how to implement this effect by rich:datatable???

Below is the code implemented by jstl.
But it's too slow! I can not endure it!

 <c:forEach var="rowCounter" items begin="0" end="2" step="1">

 <s:div rendered="#{latestSearchingAction.getHot(rowCounter+0)!=null}">
 <table width="100%" border="0" style="border: 1px solid #{a4jSkin.panelBorderColor}">
 <tr valign="top">
 <td width="33%" align="center" style="border-right: 1px solid #{a4jSkin.panelBorderColor};">
 <s:div rendered="#{latestSearchingAction.getHot(rowCounter+0)!=null}">
 <div>
 <h:outputLink target="_blank"
 value="/pages/erp/product/product.detail.#{globalConstants.urlPattern}?productId=#{latestSearchingAction.getHot(rowCounter+0).id}&amp;randomCode=#{latestSearchingAction.getHot(rowCounter+0).randomCode}">
 <s:graphicImage value="#{latestSearchingAction.getHot(rowCounter+0).image.dataOfThumbnail}"
 style="border: 0px solid black;"
 rendered="#{latestSearchingAction.getHot(rowCounter+0).image!=null and latestSearchingAction.getHot(rowCounter+0).image.dataOfThumbnail!=null}">
 </s:graphicImage>
 <h:graphicImage value="#{latestSearchingAction.getHot(rowCounter+0).imageLink}"
 width="#{globalConstants.widthOfProductThumbnailPortrait}px"
 rendered="#{latestSearchingAction.getHot(rowCounter+0).image==null or latestSearchingAction.getHot(rowCounter+0).image.dataOfThumbnail==null}"/>
 <div>
 <h:outputText
 value="#{latestSearchingAction.getHot(rowCounter+0).getLocaledName(localeSelector.language)}"
 style="word-break:break-all;word-wrap:break-word;"/>
 </div>
 </h:outputLink>
 </div>
 <div>
 <h:outputText style="font-size:15px;font-weight: bold;line-height: 150%;" value="sellPrice:&#160;"/>
 <h:outputText value="#{latestSearchingAction.getHot(rowCounter+0).sellPrice}&#160;#{latestSearchingAction.getHot(rowCounter+0).priceUnitMenu.getLocaledName(localeSelector.language)}/#{latestSearchingAction.getHot(rowCounter+0).sellingUnitMenu.getLocaledName(localeSelector.language)}" />
 </div>

 <div>
 <a4j:commandLink
 action="#{globalOperatingAction.addToCart(latestSearchingAction.getHot(rowCounter+0).id)}" immediate="true"
 onclick="alert('added to cart...');">
 <h:graphicImage value="/img/cart.gif" />
 <h:outputText
 style="font-size:15px;font-weight: bold;line-height: 150%;"
 value="add to cart" />
 </a4j:commandLink>
 <div>
 <h:outputLink target="_blank"
 value="/pages/shop/productComment.detail.#{globalConstants.urlPattern}?productId=#{latestSearchingAction.getHot(rowCounter+0).id}&amp;randomCode=#{latestSearchingAction.getHot(rowCounter+0).randomCode}">
 <h:outputText style="font-size:15px;font-weight: bold"
 value="view/add comments" />
 <h:outputText
 style="font-size:15px;font-weight: bold;line-height: 150%;"
 value="[total:#{latestSearchingAction.getHot(rowCounter+0).hitsOfComment}]" />
 </h:outputLink>
 </div>
 </div>
 </s:div>
 </td>
 </tr>
 </table>
 </s:div>

 </c:forEach>