⁠12.9. <rich:dataScroller>

The <rich:dataScroller> component is used for navigating through multiple pages of tables or grids.
⁠
The <rich:dataScroller> component

Figure 12.14. The <rich:dataScroller> component

⁠12.9.1. Basic usage

The <rich:dataScroller> must be placed in a facet of the table or grid it needs to control. Alternatively, use the for attribute to bind the parent table or grid to the scroller.
The bound table or grid should also have the rows attribute defined to limit the number of rows per page.
The <rich:dataScroller> component must be re-rendered whenever a filter changes on the bound table, so that the scroller matches the current model for the table.
⁠

Example 12.15. Basic usage

​<rich:dataTable id="table" value="#{capitalsBean.capitals}" var="cap" rows="5">
​   <!-- table content -->
​   ...
​</rich:dataTable>
​<rich:dataScroller for="table" maxPages="5">
​   <f:facet name="first">
​      <h:outputText value="First" />
​   </f:facet>
​   <f:facet name="last">
​      <h:outputText value="Last" />
​   </f:facet>
​</rich:dataScroller>

⁠12.9.2. Appearance and interactivity

The page attribute is a value-binding attribute used to define and save the current page number.
The <rich:dataScroller> component provides a range of controllers for scrolling through tables and grids:
Controls for scrolling by a specific amount
The component includes controls for switching to the first page, the last page, the next page, and the previous page, as well as controls for fast-forwarding or rewinding by a set amount. Use the fastStep attribute to set the number of pages to skip when fast-forwarding or rewinding.
The appearance of these controls can be customized using the following facets: first, last, next, previous, fastForward, and fastRewind. Additionally, there are facets for the controls' disabled states: first_disabled, last_disabled, next_disabled, previous_disabled, fastForward_disabled, and fastRewind_disabled.
Page controls
The component also features a series of numbered controls to jump to a specific page. Use the maxPages attribute to limit the number of page controls that appear. The current page control is highlighted.
To add optional separators between controls, define the separators with the controlsSeparator facet.

⁠12.9.3. JavaScript API

The <rich:dataScroller> component can be controlled through the JavaScript API. The JavaScript API provides the following functions:
switchToPage(pageIndex)
Switch to the page specified with the pageIndex parameter.
next()
Switch to the next page.
previous()
Switch to the previous page.
first()
Switch to the first page.
last()
Switch to the last page.
fastForward()
Step forward through the pages by the fastStep amount.
fastRewind()
Step backward through the pages by the fastStep amount.

⁠12.9.4. Reference data

  • component-type: org.richfaces.DataScroller
  • component-class: org.richfaces.component.UIDataScroller
  • component-family: org.richfaces.DataScroller
  • renderer-type: org.richfaces.DataScrollerRenderer
  • handler-class: org.richfaces.taglib.DataScrollerHandler

⁠12.9.5. Style classes and skin parameters

⁠

Table 12.6. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties
.rf-ds
This class defines styles for the data scroller.
generalFamilyFont
font-family
generalSizeFont
font-size
tableBackgroundColor
background
.rf-ds-btn
This class defines styles for buttons in the data scroller.
generalTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size
tableBorderColor
border-color
headerBackgroundColor
background-color
.rf-ds-btn-first
This class defines styles for the first button.
No skin parameters.
.rf-ds-btn-fastrwd
This class defines styles for the fast rewind button.
No skin parameters.
.rf-ds-btn-prev
This class defines styles for the previous button.
No skin parameters.
.rf-ds-btn-next
This class defines styles for the next button.
No skin parameters.
.rf-ds-btn-fastfwd
This class defines styles for the fast forward button.
No skin parameters.
.rf-ds-btn-last
This class defines styles for the last button.
No skin parameters.
.rf-ds-nmb-btn
This class defines styles for page number buttons in the data scroller.
generalTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size
tableBorderColor
border-color
tableBackgroundColor
background-color
.rf-ds-press
This class defines styles for a data scroller when a control is pressed.
tableBorderColor
border-color
tableBackgroundColor
background
 
.rf-ds-act
This class defines styles for an active data scroller.
tableBorderColor
color
.rf-ds-dis
This class defines styles for a disabled data scroller.
tableBorderColor
color