在JSF中实现分页（一）

 

     对于大多数Web应用，分页都是必不可少的功能，当然在JSF中也一样，我在这里用两篇文章介绍两种方法来展示一下，如何在JSF中实现分页。本文假定你已经对JSF有了一些简单的了解，懂得基本配置和使用，并建立起一个blank项目。

     Myfaces是Apache基金会中的一个一级项目，除了实现JSF标准外，做了很多的扩展工作，在Myfaces包中有一个扩展包Tomahawk，我们将主要使用其中的两个Component实现分页：一个是<t:dataTable>，另一个是<t:dataScroller>，在第一篇里面，我们简易的组合这两个Component来实现一种简单，但并不高效的分页。

     下面的例子来自于Myfaces-Sample，我省去了其中和分页逻辑无关的内容，详细的例子可以下载Myfaces-Sample包或者访问http://www.irian.at/myfaces/home.jsf 查看。

     第一部分：dataTable

    这里定义了我们用于分页的<t:dataScroller>，最主要的是配置该分页Component针对哪个dataTable进行分页的“for”属性，该属性与dataTable绑定，并对其进行分页，在这里，绑定了第一部分中的id="data"的dataTable，下面有很多的<t:facet>是指定分页的导航样式的，这里使用了图片作为导航，可以把他们改成文字形式的导航。

    当然这只是最简单，也是一种不推荐的分页方式，因为在每次进行分页的时候，将会从数据库中取回所有的记录放入List中，然后，dataScroller在对这个List进行分页，如果在数据量很大的情况下，这种方式显然是不符合要求的，假设每条记录占用1k内存，数据库中有100万条记录，每次要把这个List全部读取出来将占用1G内存。我们需要一种Load on demand方式的读取，也就是只在需要查看某页的时候读取该页的数据。

    另外一方面，JSF的生命周期中有多个阶段会调用到#{pagedSort.cars}中对应的方法，如果在这里调用了数据访问逻辑，就会在只显示一次页面的情况下进行多次数据库操作，也是相当的耗费资源的。

    所以我们需要有更好的分页方式去解决以上问题，下一篇我将介绍另一种方法以改善这些问题。

 

< t:dataTable  id ="data"
                  var ="car"
                  value ="#{pagedSort.cars}"
                  rows ="10" >
    ……
</ t:dataTable >

在这一部分中，dataTable绑定了一个backing bean - pagedSort中的cars属性，我们可以在这个属性中加入数据访问逻辑，从数据库或者其他来源取得用于显示的数据。比如我们可以通过Hibernate获取一个List，其中包含有我们用于显示的POJOs。

注意，dataTable中的rows属性指的是每页的行数，是必须指定的，否则是无法进行分页的，如果在项目中会使用固定行数的分页，建议把这个值写在BaseBackingBean中，并暴露一个property，供页面调用，所以每次在页面中就可以这么写#{backingBean.pageSize}。

第二部分：dataScroller

     < t:dataScroller  id ="scroll_1"
                        for ="data"
                        fastStep ="10"
                        paginator ="true"
                        paginatorMaxPages ="9" >
             < f:facet  name ="first"   >
                 < t:graphicImage  url ="images/arrow-first.gif"  border ="1"   />
             </ f:facet >
             < f:facet  name ="last" >
                 < t:graphicImage  url ="images/arrow-last.gif"  border ="1"   />
             </ f:facet >
             < f:facet  name ="previous" >
                 < t:graphicImage  url ="images/arrow-previous.gif"  border ="1"   />
             </ f:facet >
             < f:facet  name ="next" >
                 < t:graphicImage  url ="images/arrow-next.gif"  border ="1"   />
             </ f:facet >
             < f:facet  name ="fastforward" >
                 < t:graphicImage  url ="images/arrow-ff.gif"  border ="1"   />
             </ f:facet >
             < f:facet  name ="fastrewind" >
                 < t:graphicImage  url ="images/arrow-fr.gif"  border ="1"   />
             </ f:facet >
         </ t:dataScroller >