RichFaces JSF自定义分页组件(简洁版)

最新推荐文章于 2022-11-24 09:09:56 发布

eilent

最新推荐文章于 2022-11-24 09:09:56 发布

阅读量1.8k

点赞数

分类专栏： JSF 文章标签： richfaces jsf integer action string include

JSF 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用原有的组件分页，所有的数据都要从数据库取出来，当大量数据的时候比较消耗资源，下边例子实现了从数据库的分页，采用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>

eilent

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
RichFaces JSF自定义分页组件(简洁版)

使用原有的组件分页，所有的数据都要从数据库取出来，当大量数据的时候比较消耗资源，下边例子实现了从数据库的分页，采用RichFaces4实现，改到其他的版本只要修改显示的部分即可。AbstractPager.java是个抽象的分页类，用于实现了分页的功能。是需要分页的受管bean的父类，只要重写2个抽象方法就可以。package com.gzeport.app.eLa
复制链接

扫一扫