The screenshot shows one controller from each group.

There are also facets used to create the disabled states: "first_disabled", "last_disabled", "next_disabled", "previous_disabled", "fastforward_disabled", "fastrewind_disabled".

For the "fastforward"/"fastrewind" controls customization the additional "fastStep" attribute is used. The attribute indicates pages quantity to switch onto when fast scrolling is used.

The "page" is a value-binding attribute used to define and save the current page number. The example is placed below.

Example:

...

<h:form id="myForm">

    <rich:dataTable id="carList" rows="7" value="#{dataTableScrollerBean.allCars}" var="category">

        <f:facet name="header">

            <rich:columnGroup>

                <h:column>

                    <h:outputText value="Make" />

                </h:column>

                <h:column>

                    <h:outputText value="Model" />

                </h:column>

                <h:column>

                    <h:outputText value="Price" />

                </h:column>

            </rich:columnGroup>

        </f:facet>

        <h:column>

            <h:outputText value="#{category.make}" />

        </h:column>

        <h:column>

            <h:outputText value="#{category.model}" />

        </h:column>

        <h:column>

            <h:outputText value="#{category.price}" />

        </h:column>

    </rich:dataTable>

    <rich:datascroller id="sc2" for="carList" reRender="sc1" maxPages="7" page="#{dataTableScrollerBean.scrollerPage}" />

    <h:panelGrid>

        <h:panelGroup>

            <h:outputText value="Set current page number:" />

            <h:inputText value="#{dataTableScrollerBean.scrollerPage}" id="sc1" size="1"/>

            <h:commandButton value="Set" />

        </h:panelGroup>

    </h:panelGrid>

</h:form>

...

In the example above you can enter the page number you want and set it by clicking on the <h:commandButton> . By the way, if you use <rich:datascroller> page links the input field rerenders and current page number changes.

The result should be like below:

The "pageIndexVar" and "pagesVar" attributes define a request scope variables and provide an ability to show the current page and the number of pages in the <rich:datascroller> .

These attributes are used for definition the names of variables, that is used in the facet with name "pages" . An example can be found below:

Example:

...

<h:form>

    <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5">

        <rich:column>

            <h:outputText value="#{cap.name}" />

        </rich:column>

        <f:facet name="footer">

            <rich:datascroller pageIndexVar="pageIndex" pagesVar="pages">

                <f:facet name="pages">

                    <h:outputText value="#{pageIndex} / #{pages}" />

                </f:facet>

            </rich:datascroller>

        </f:facet>

    </rich:dataTable>

</h:form>

...

It's possible to insert optional separators between controls. For this purpose use a "controlsSeparator" facet. An example is placed below.

 ...

<f:facet name="controlsSeparator">

          <h:graphicImage value="/image/sep.png"/>

</f:facet>

...

Starting from 3.2.1 of RichFaces multiple <rich:datascroller> instances behavior and page bindings are corrected. Incorrect page after model changes handling is added. Phase Listener called before RenderResponce scans the page for the <rich:datascroller> and performs the following operations: