使用原有的组件分页,所有的数据都要从数据库取出来,当大量数据的时候比较消耗资源,下边例子实现了从数据库的分页,采用RichFaces4实现,改到其他的版本只要修改显示的部分即可。
AbstractPager.java
是个抽象的分页类,用于实现了分页的功能。是需要分页的受管bean的父类,只要重写2个抽象方法就可以。
package com.gzeport.app.eLargeClearance.common;
import java.util.List;
/**
* @author LiCailong *
*
* @param <T>
*/
public abstract class AbstractPager<T> {
protected Integer pageSize = 20; // 每页显示的数量
protected Integer curPage = 1; // 当前的页码
protected Integer recordSize = 0; // 记录总数
protected Integer totalPage = 0; // 总页数
protected List<T> model = null;
/**
* @param pageSize
* 每页显示的数量 *
*
* @param currentPage
* 当前的页码 *
* @return
*/
protected abstract List<T> loadData(int pageSize, int currentPage);
/** * 返回记录总数 * @return */
protected abstract int getRowSize();
protected void fillData() {
recordSize = getRowSize();
if (recordSize < pageSize) {
totalPage = 1;
} else {
double tempRecordSize = recordSize;
totalPage = (int) Math.ceil(tempRecordSize / pageSize);
}
if (curPage < 1) {
curPage = 1;
} else if (curPage > totalPage) {
curPage = totalPage;
}
this.model = loadData(pageSize, curPage);
}
public String firstPage() {
setCurPage(1);
return null;
}
public String previousPage() {
if (curPage > 1) {
curPage--;
}
fillData();
return null;
}
public String nextPage() {
if (curPage < totalPage) {
curPage++;
}
fillData();
return null;
}
public String lastPage() {
setCurPage(getTotalPage());
return null;
}
public int getInit() {
fillData();
return 0;
}
public Integer getPageSize() {
return pageSize;
}
public void setPageSize(Integer pageSize) {
this.pageSize = pageSize;
fillData();
}
public Integer getCurPage() {
return curPage;
}
public void setCurPage(Integer curPage) {
this.curPage = curPage;
fillData();
}
public Integer getTotalPage() {
return totalPage;
}
public List<T> getModel() {
return model;
}
public Integer getRecordSize() {
return recordSize;
}
}
scrollerBar.xhtml
用于显示分页的导航按钮
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:form>
<h:panelGrid columns="11" id="scrollerBar">
<rich:select value="#{bean.pageSize}" listWidth="80px"
id="selPageSize" required="true">
<c:forEach begin="1" end="3" varStatus="st">
<f:selectItem itemLabel="每页显示#{st.count * 10}条"
itemValue="#{st.count * 10}" />
</c:forEach>
<a4j:ajax event="selectitem" render="#{dataTable} scrollerBar" />
</rich:select>
<script type="text/javascript"> #{rich:component('selPageSize')}.setValue(#{bean.pageSize}); </script>
<a4j:commandLink value="首页" action="#{bean.firstPage}"
render="#{dataTable} scrollerBar" disabled="#{bean.curPage == 1}" />
<a4j:commandLink value="上页" action="#{bean.previousPage}"
render="#{dataTable} scrollerBar" disabled="#{bean.curPage == 1}" />
<a4j:commandLink value="下页" action="#{bean.nextPage}"
render="#{dataTable} scrollerBar"
disabled="#{bean.curPage == bean.totalPage}" />
<a4j:commandLink value="末页" action="#{bean.lastPage}"
render="#{dataTable} scrollerBar"
disabled="#{bean.curPage == bean.totalPage}" />
<h:outputText value="第#{bean.curPage}/#{bean.totalPage}页 "></h:outputText>
<h:outputText value="#{bean.pageSize}条/页"></h:outputText>
<h:outputText value="共#{bean.recordSize}条记录"></h:outputText>
<rich:select value="#{bean.curPage}" id="selPage" listWidth="20px">
<c:forEach begin="1" end="#{bean.totalPage}" varStatus="st">
<f:selectItem itemLabel="#{st.count}" itemValue="#{st.count}" />
</c:forEach>
<a4j:ajax event="selectitem" render="#{dataTable} scrollerBar" />
</rich:select>
<a4j:status>
<f:facet name="start">
<h:graphicImage value="/images/ai.gif" />
</f:facet>
</a4j:status>
</h:panelGrid>
<script type="text/javascript"> document.getElementById("#{rich:clientId('selPageSize')}Input") .setAttribute("style", "width: 80px !important;"); document.getElementById("#{rich:clientId('selPage')}Input") .setAttribute("style", "width: 20px !important;"); </script>
</h:form>
</ui:composition>
分页页面使用的例子
<!-- 初始化数据 -->
<h:inputHidden value="#{topicBean.init}" />
<!-- 分页 -->
<ui:include src="/inc/scrollerBar.xhtml">
<ui:param name="bean" value="#{topicBean}" />
<ui:param name="dataTable" value="table" />
</ui:include>