Question

I am using MyFaces 1.2 along with Tomahawk for some additional components. For this particular page, I needed to use a dataList (instead of a dataTable) because I for every item in my collection i need to display multiple rows (so I am unable to use dataTable).

i tried using rowClasses but that doesn’t work (i think because i am generating the rows myself). I also tried binding the rows to a backing bean but that seems to occur only 1x, not for each item.

Any idea how to best implement this using JSF?

Answer 1

Unfortunately, the <t:dataList> has no varStatus concept similar to <c:forEach> and <ui:repeat>. You would otherwise be able to do something like this:

<table id="mytable">
    <c:forEach items="#{bean.items}" var="item" varStatus="loop">
        <tr>
            <td class="#{loop.index % 2 == 0 ? 'even' : 'odd'}">
                <h:outputText value="#{item}" />
            </td>
        </tr>
    </c:forEach>
</table>

with

#mytable tr.odd { background-color: #ddd; }
#mytable tr.even { background-color: #eee; }

If <c:forEach> is not an option for you due to technical limitations as it’s a view build time tag, not a render time tag, and you’re using Facelets instead of JSP, then you should be able to use <ui:repeat> following a similar syntax with the only difference that you need to use value attribute instead of items.

<table id="mytable">
    <ui:repeat value="#{bean.items}" var="item" varStatus="loop">
        <tr>
            <td class="#{loop.index % 2 == 0 ? 'even' : 'odd'}">
                <h:outputText value="#{item}" />
            </td>
        </tr>
    </ui:repeat>
</table>

But if you aren’t using Facelets (even though your previous questions suggests that you’re using Facelets), then your best bet is using the CSS3 nth-child pseudoselector.

#mytable tr:nth-child(odd) { background-color: #ddd; }
#mytable tr:nth-child(even) { background-color: #eee; }

But if the webbrowser used by your target audience doesn’t support CSS3 (IE8 and older), then you need to resort to JavaScript/jQuery to add the CSS class during document load.