9 Replies Latest reply on Feb 2, 2012 2:14 PM by Ian Brewster

    jquery for zebra style table and datascroller

    Sascha Janz Master

      i use jquery to get a zebra style table like on demo page

      http://livedemo.exadel.com/richfaces-demo/richfaces/jQuery.jsf

      but when i add a datascroller and go to another page, the style is gone.

      what to do?

        • 1. Re: jquery for zebra style table and datascroller
          Ilya Shaikovsky Master

          add outputPanel like there

           <a4j:outputPanel ajaxRendered="true">
           <rich:jQuery selector="#form:carList tr:odd" query="addClass('odd-row')" />
           <rich:jQuery selector="#form:carList tr:even" query="addClass('even-row')" />
           <rich:jQuery selector="#form:carList tr"
           query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
           <rich:jQuery selector="#form:carList tr"
           query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>
           </a4j:outputPanel>
          


          because jQuerry calls should be performed after table redrawn.

          • 2. Re: jquery for zebra style table and datascroller
            Sascha Janz Master

            great! thanks.

            one problem solved.

            i use it for an extendeddatatable ( newest version of richfaces)

            i defined

            <a4j:outputPanel ajaxRendered="true">
             <rich:jQuery selector="#wftbl tr:odd" query="addClass('odd-row')" timing="onload" />
             <rich:jQuery selector="#wftbl tr:even" query="addClass('even-row')" timing="onload" />
             <rich:jQuery selector="#wftbl tr"
             query="mouseover(function(){jQuery(this).addClass('active-row')})" timing="onload"/>
             <rich:jQuery selector="#wftbl tr"
             query="mouseout(function(){jQuery(this).removeClass('active-row')})" timing="onload"/>
             </a4j:outputPanel>
            


            rows of extendeddatatable is 18



            if there are less then 18 rows then the bottom of datatable gets activerow styleclass where ever i move the mouse over datatable...

            don't know why. could someone help?

            • 3. Re: jquery for zebra style table and datascroller
              Ilya Shaikovsky Master

              it's normal because footer rendered using tr tags also as for any table..

              • 4. Re: jquery for zebra style table and datascroller
                Sascha Janz Master

                so no solution for this?

                can i modify selector?

                • 5. Re: jquery for zebra style table and datascroller
                  vali_iva Newbie

                  Hi,

                  Got the same problem.

                  So no solution for this?

                   

                  Vali

                  • 6. Re: jquery for zebra style table and datascroller
                    Ilya Shaikovsky Master

                    guys please show somebody you'r current code and I wil try to look for workaround.

                    • 7. Re: jquery for zebra style table and datascroller
                      Ilya Shaikovsky Master

                      b.t.w. at first please clarify also latest version of which branch (3.x or 4.x) you using

                      • 8. Re: jquery for zebra style table and datascroller
                        vali_iva Newbie

                        Hi Ilya,

                         

                        I'm using RF 3.3.3 Final.

                         

                        And this is the code:

                         


                        <a4j:outputPanel id="companies" ajaxRendered="true">
                             <rich:extendedDataTable value="#{asetsScreener.comps}" id="compsTable" 
                                                     var="comp" selectionMode="none"  height="210px" >
                                   <rich:column visible="#{asetsScreener.indexes[1].shown}">
                                        <f:facet name="header">
                                             <h:outputText value="Company"/>
                                        </f:facet>
                                        <h:outputText value="#{comp['CompanyName']}"/>
                                   </rich:column>
                                   <rich:columns value="#{asetsScreener.indexes}" var="column" 
                                             index="ind" visible="#{column.shown}">
                                        <f:facet name="header">
                                             <h:outputText value="#{column.indicator}"/>
                                        </f:facet>
                                        <h:outputText value="#{comp[column.indicator]}"/>
                                   </rich:columns>
                             </rich:extendedDataTable>
                             <rich:jQuery selector="#compsTable tr:odd" query="addClass('odd-row')" />
                             <rich:jQuery selector="#compsTable tr:even" query="addClass('even-row')" />
                             <rich:jQuery selector="#compsTable tr"
                                       query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
                             <rich:jQuery selector="#compsTable tr"
                                       query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>
                             <h:outputText value="#{asetsScreener.indexes[1].shown}" id="testtest"/>
                        </a4j:outputPanel>
                        
                        

                         

                         

                        I tried to use  td instead of  tr (zebra style for columns) and the result was exactly the same.

                        And I have a bigger problem with this code on the dynamic columns visibility. But I'll open another topic for this.

                        • 9. Re: jquery for zebra style table and datascroller
                          Ian Brewster Newbie

                          Was there ever an answer to this? I have the same problem and my code is pretty much the same. Unless I'm wrong extendeddatatable needs the height attribute setting or it seems to apply some large value (400px or so). Therefore if the height is, say 200px, and you only have one row in the table there is a large 'whitespace' row at the bottom of the table. Jquery highlights this at the same time as alternate rows.

                           

                          Any help to resolve this would be much appreciated

                           

                          Thanks

                          Ian