JSF 分页方案

一、方案一

 

1.使用MyFaces的扩展组件Tomahawk 1.1.9的<t:dataTable>和<t:dataScroller>标签

2.例子

 

                         <h:form prependId="false">

                            <t:panelGrid>

                                <t:saveState value="#{viewCustomerInfo.customerInfos}"/>

                                <t:dataTable id="paginator" value="#{viewCustomerInfo.customerInfos}" var="info" preserveDataModel="false" rows="3" styleClass="tb1" width="100%" border="0" cellspacing="0" cellpadding="0">

                                   <h:column>

                                       <f:facet name="header"><h:outputText value="code"/></f:facet>

                                       <h:outputText value="#{info.customerCode}"/>

                                   </h:column>

                                   <h:column>

                                       <f:facet name="header"><h:outputText value="name"/></f:facet>

                                       <h:outputText value="#{info.customerName}"/>

                                   </h:column>

                                </t:dataTable>

                                <t:dataScroller id="scroller" paginator="true" paginatorMaxPages="9" fastStep="5" paginatorActiveColumnStyle="font-weight:bold;" for="paginator" immediate="true">

                                   <f:facet name="first">

                                       <t:graphicImage url="../img/page/first.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="fastrewind">

                                       <t:graphicImage url="../img/page/rewind.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="previous">

                                       <t:graphicImage url="../img/page/previous.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="next">

                                       <t:graphicImage url="../img/page/next.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="fastforward">

                                       <t:graphicImage url="../img/page/forward.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="last">

                                       <t:graphicImage url="../img/page/last.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                </t:dataScroller>

                            </t:panelGrid>

                         </h:form>

 

3. 说明：

（1）使用一组dataTable和dataScroller标签，其中dataTable必须指定id和rows（当然还有value）

（2）将dataScroller的for属性的值设置为dataTable的id来完成关联（如果将dataScroller嵌套在dataTable的内部则不需要该设定）

（3）dataScroller中的facet标签的name值是固定取值（first,fastrewind,previous,next,fastforward,last来分别表示首页，上N页（其中N为dataScroller的fastStep的属性值，上一页，下一页，下N页，末页））

（4）由于dataTable中的数据是一次性读取（且manage-bean的scope是request），在翻页时数据会丢失，所以要用到<t:saveState>来保存状态，当然，如果manage-beand的scope为session则不会有此问题

（5）此方案的局限性：只适合数据量较小的分页，因为该方案一次行将数据全部取出并保存在内存中，如果数据超过一定的量，则影响性能，方案二解决了该问题

 

 

 

二、方案二

 

1.     使用MyFaces的扩展组件Tomahawk 1.1.9的<t:dataTable>和<t:dataScroller>标签

2.     对DataModel进行封装，该DataModel仅仅持有了一页的数据DataPage，并在适当的时候加载数据，读取我们需要页的数据。(代码见附件java code.jar)

3.     DataModel 是一个抽象类，用于封装各种类型的数据源和数据对象的访问，JSF中dataTable中绑定的数据实际上被包装成了一个DataModel，以消除各种不同数据源和数据类型的复杂性

4. 例子

 

                        <h:form prependId="false">

<t:panelGrid>

                                <%--<t:saveState value="#{viewCustomerInfo.customerInfos}"/>--%>

                                <t:dataTable id="paginator" value="#{viewCustomerInfo.dataModel}" var="info" preserveDataModel="false" rows="3" styleClass="tb1" width="100%" border="0" cellspacing="0" cellpadding="0">

                                   <h:column>

                                       <f:facet name="header"><h:outputText value="code"/></f:facet>

                                       <h:outputText value="#{info.customerCode}"/>

                                   </h:column>

                                   <h:column>

                                       <f:facet name="header"><h:outputText value="name"/></f:facet>

                                       <h:outputText value="#{info.customerName}"/>

                                   </h:column>

                                </t:dataTable>

                                <t:dataScroller id="scroller" paginator="true" paginatorMaxPages="9" fastStep="5" paginatorActiveColumnStyle="font-weight:bold;" for="paginator" immediate="true">

                                   <f:facet name="first">

                                       <t:graphicImage url="../img/page/first.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="fastrewind">

                                       <t:graphicImage url="../img/page/rewind.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="previous">

                                       <t:graphicImage url="../img/page/previous.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="next">

                                       <t:graphicImage url="../img/page/next.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="fastforward">

                                       <t:graphicImage url="../img/page/forward.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="last">

                                       <t:graphicImage url="../img/page/last.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                </t:dataScroller>

                            </t:panelGrid>                         

</h:form>

 

5.说明

说明（1）（2）（3）同方案一

（4）因为此方案dataTable的value值是绑定一个dataModel，所以不需要用<t:saveState>来保存状态

（5）需要扩展抽象类javax.faces.model.DataModel，并定义一个DataPage对象来保存每页的记录

（6）所有扩展和自定义的类（见附件）

（7）此方案每次翻页只会取得所需页的数据，结合BaseHibernateService定义的方法，每次翻页返回一个DatePage对象

 

【参考文章】

1. http://www.blogjava.net/steady/archive/2005/12/30/26013.html

2. http://blog.sina.com.cn/s/blog_602feaa80100gdqu.html