Chapter 6. Conversion and Validation

Scrolling Techniques

There are two ways to scroll through tables with lots of rows: with a scrollbar or with some other type of control that moves through the rows. We explore both techniques in this section.

Scrolling with a Scrollbar

Scrolling with a scrollbar is the simplest solution. Wrap your h:dataTable in an HTML div, like this:

  <div style="overflow:auto; width:100%; height:200px;">      <h:dataTable...>         <h:column>            ...         </h:column>         ...      </h:dataTable>   </div>

The application shown in Figure 5-17 is identical to the application discussed in "Database Tables" on page 191, except that the data table is placed in a scrollable div, as shown above.

Figure 5-17. Scrolling a table with a scrollable div

Scrollbars are nice from a usability standpoint, but they can be expensive for large tables because all the table data is loaded at once. A less resource-intensive alternative is to scroll through tables with page widgets, an approach that requires only one page of data at a time.

Scrolling with Pager Widgets

Scrolling with pager widgets is more efficient than scrolling with a scrollable DIV, but it is also considerably more complex. In Chapter 13, we show you how to implement a pager widget that you can use with any table created with h:dataTable (see "How do I show a large data set, one page at a time?" on page 638 of Chapter 13). Figure 5-18 shows an example of that pager.

Figure 5-18. Scrolling with a JSF pager

The application shown in Figure 5-18 uses a data table that displays the ISO country codes for locales. We obtain that list by calling java.util.Locale.getISO-Countries(), a static method that returns an array of strings.