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 > <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. |