rich:dataTable zebra style

[morellik]

Dear all,

I'm trying to enable zebra style on my dataTable, but I've some trouble. I follow the example from show case:

<style>
                .even-row {
                    background-color: #FCFFFE;
                }

                .odd-row {
                    background-color: #ECF3FE;
                }

                .active-row {
                    background-color: #FFEBDA !important;
                    cursor: pointer;
                }
            </style>
            <rich:panel header="List User" style="width:800px;">
                <h:form id="formID">
                    <rich:dataTable id="dataTable" value="#{localUserEJB.userlist}" var="n" rowClasses="odd-row, even-row"
                                    styleClass="stable"
                                    rows="10"
                                    >
                        <rich:column sortBy="#{n.lastName}" id="lastname" sortOrder="#{localUserEJB.lastnameOrder}"
                                     filterExpression="#{fn:containsIgnoreCase(n.lastName,
                                                         filteringBean.lastNameFilterString)}"
                                     >
                            <f:facet name="header">
                                <a4j:commandLink value="User" render="dataTable" action="#{localUserEJB.sortByLastname}" />
                                  
                                <h:inputText value="#{filteringBean.lastNameFilterString}">
                                    <a4j:ajax event="change" render="dataTable" execute="@this" />
                                </h:inputText>

                            </f:facet>
                            #{n.firstName} #{n.lastName}

.......
........
.........

  </rich:dataTable>

                </h:form>
                 <rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />
                <rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />
                <rich:jQuery selector=".stable tr" event="mouseover" query="jQuery(this).addClass('active-row')" />
                <rich:jQuery selector=".stable tr" event="mouseout" query="jQuery(this).removeClass('active-row')" />

                <rich:notifyMessages stayTime="2000" nonblocking="true" />
            </rich:panel>
                        </rich:column>

But, when I reload the page all rows has the same background color (odd-color) and the mouse events works.

If I remove:

<rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />

<rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />

and reload the page the page has the zebra style and the mouse events works. But when I sort or filter the columns the mouse events stops to works.

How can I solve this problem?

Thanks

[raymoncalderon]

Hi:

Try with following code:

1. <rich:jQuery selector="#datatable tr:odd" query="addClass('odd-row')" /> 
2. <rich:jQuery selector="#datatable tr:even" query="addClass('even-row')" /> 
3. <rich:jQuery selector="#datatable tr" event="mouseover" query="live('mouseover',function(){jQuery(this).addClass('active-row')})" /> 
4. <rich:jQuery selector="#datatable tr" event="mouseout" query="live('mouseout',function(){jQuery(this).removeClass('active-row')})" />

I hope to help you

Regards

Raymon

[morellik]

Sorry but doesn't work.

Applying you suggestion all rows has the same background color. If I remove the first two lines I have the zebra but doesn't work the mouseover event.