【SSH项目实战】国税协同平台-26.分页功能编写

简介:
可以看到,我们之前的用户管理、角色管理和信息发布管理的列表下均有这些东西:
总共1条记录,当前第 1 页,共 1 页    上一页  下一页 到 

这个就是美工留给我们做分页的,我们接下来就以信息发布管理模块为例做一个分页功能。

我们在做之前首先分析一下我们分页的规则:
总共1条记录,当前第 1 页,共 1 页    上一页  下一页 到  

属性有:
总记录数
当前页号
总页数
页大小
列表记录

使用例子:
共6条记录,每页3条,共2页

总页数 = 总记录数/页大小

共7条记录,每页3条,共3页

tem = 总记录数/页大小;

总页数 = (总记录数%页大小==0)?tem:(tem+1)

页号;当总记录数为0时,页号为0

总共30条记录,每页10条,第2页的数据从第10开始(因为第一页从0开始)

下面开始进行分页功能的编写:
首先我们创建一个分页对象:
package cn.edu.hpu.tax.core.page;

import java.util.ArrayList;
import java.util.List;

public class PageResult {
	
	//总记录数
	private long totalCount;
	//当前页号
	private int pageNo;
	//总页数
	private int totalPageCount;
	//页大小
	private int pageSize; 
	//列表记录
	private List items;
	
	public PageResult(){
		
	}
	
	//计算总页数
	public PageResult(long totalCount, int pageNo, int pageSize, List items) {
		super();
		this.totalCount = totalCount;
		this.pageNo = pageNo;
		this.pageSize = pageSize;
		this.items = items==null?new ArrayList():items;
		if(totalCount!=0){
			//计算总数
			int tem=(int)totalCount/pageSize;
			this.totalPageCount=(totalCount%pageSize==0)?tem:(tem+1);
		}else{
			this.pageNo=0;
		}
	}


	public long getTotalCount() {
		return totalCount;
	}
	public void setTotalCount(long totalCount) {
		this.totalCount = totalCount;
	}
	public int getPageNo() {
		return pageNo;
	}
	public void setPageNo(int pageNo) {
		this.pageNo = pageNo;
	}
	public int getTotalPageCount() {
		return totalPageCount;
	}
	public void setTotalPageCount(int totalPageCount) {
		this.totalPageCount = totalPageCount;
	}
	public int getPageSize() {
		return pageSize;
	}
	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}
	public List getItems() {
		return items;
	}
	public void setItems(List items) {
		this.items = items;
	}
}

我们以后页面上的所有数据都会从分页对象中去取了。
我们下面来使用我们写的分页对象进行分页功能的编写。

我们在信息发布管理模块的InfoAction中引入分页对象PageResult、页号pageNo和页大小pageSize(get和set方法也要写):
//分页对象
private PageResult pageResult;
//页号
private int pageNo;
//页大小
private int pageSize;


public PageResult getPageResult() {
	return pageResult;
}
public void setPageResult(PageResult pageResult) {
	this.pageResult = pageResult;
}
public int getPageNo() {
	return pageNo;
}
public void setPageNo(int pageNo) {
	this.pageNo = pageNo;
}
public int getPageSize() {
	//给的默认的分页大小
	if(pageSize < 1) pageSize = 4;
	return pageSize;
}
public void setPageSize(int pageSize) {
	this.pageSize = pageSize;
}

并且我们的查询也随着分页发生改变,我们的每次都要根据当前页数来查询分配数据,这里我们修改一下InfoAction的listUI方法:
//列表页面
public String listUI() throws Exception{
	try {
		//加载分类集合
		ActionContext.getContext().getContextMap().put("infoTypeMap", Info.INFO_TYPE_MAP);
		QueryHelper queryHelper=new QueryHelper(Info.class,"i");
		if(info != null){
			if(StringUtils.isNotBlank(info.getTitle())){
				info.setTitle(URLDecoder.decode(info.getTitle(),"utf-8"));
				queryHelper.addCondition("i.title like ?", "%"+info.getTitle()+"%");
			}
			queryHelper.addCondition("i.state = ?", "1");
		}
		//根据创建时间降序排序
		queryHelper.addOrderByProperty("i.createTime", queryHelper.ORDER_BY_DESC);
		pageResult=infoService.getPageResult(queryHelper,getPageNo(),getPageSize());
	} catch (Exception e) {
		throw new Exception(e.getMessage());
	}
	return "listUI";
}

可以看到,我们infoService.getPageResult()方法是没有编写的,我们在baseService中去编写这个方法:
BaseService:
//分页
public PageResult getPageResult(QueryHelper queryHelper, int pageNo,int pageSize);

BaseServiceImpl:
@Override
public PageResult getPageResult(QueryHelper queryHelper, int pageNo,
		int pageSize) {
	return baseDao.getPageResult(queryHelper,pageNo,pageSize);
}

然后我们在BaseDao中实现getPageResult方法:
BaseDao中:
//分页
public PageResult getPageResult(QueryHelper queryHelper, int pageNo,int pageSize);

BaseDaoImpl中:
@Override
public PageResult getPageResult(QueryHelper queryHelper, int pageNo,
		int pageSize) {
	Query query=getSession().createQuery(queryHelper.getQueryListHql());
	List<Object> parameters=queryHelper.getParameters();
	//添加查询条件
	if(parameters!=null){
		for (int i = 0; i < parameters.size(); i++) {
			query.setParameter(i, parameters.get(i));
		}
	}
	//进行分页
	if(pageNo<1) pageNo=1;
	
	query.setFirstResult((pageNo-1)*pageSize);//设置数据起始索引号
	query.setMaxResults(pageSize);
	List items=query.list();
	
	//获取总记录数
	Query queryCount=getSession().createQuery(queryHelper.getQueryCountHql());
	if(parameters!=null){
		for (int i = 0; i < parameters.size(); i++) {
			queryCount.setParameter(i, parameters.get(i));
		}
	}
	long totalCount=(Long)queryCount.uniqueResult();
	return new PageResult(totalCount, pageNo, pageSize, items);
}

在上面的代码中,我们使用了queryHelper.getQueryCountHql()方法来获取一个查询总记录数的hql语句,这个方法我们还没有,我们在QueryHelper类中添加这个方法:
//查询统计数的hql语句
public String getQueryCountHql(){
	return "SELECT COUNT(*) "+fromClause+whereClause;
}

我们通过BaseService和BaseDao在InfoAction的listUI方法中获取到我们的分页查询对象PageRueslt了,我们下面就在相应的信息发布管理列表模块的jsp中去使用它:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@include file="/common/header.jsp"%>
    <title>信息发布管理</title>
    <script type="text/javascript">
  	//全选、全反选
	function doSelectAll(){
		// jquery 1.6 前
		//$("input[name=selectedRow]").attr("checked", $("#selAll").is(":checked"));
		//prop jquery 1.6+建议使用
		$("input[name=selectedRow]").prop("checked", $("#selAll").is(":checked"));		
	}
  	//新增
  	function doAdd(){
  		document.forms[0].action = "${basePath}tax/info_addUI.action";
  		document.forms[0].submit();
  	}
  	//编辑
  	function doEdit(id){
  		document.forms[0].action = "${basePath}tax/info_editUI.action?info.infoId=" + id;
  		document.forms[0].submit();
  	}
  	//删除
  	function doDelete(id){
  		document.forms[0].action = "${basePath}tax/info_delete.action?info.infoId=" + id;
  		document.forms[0].submit();
  	}
  	//批量删除
  	function doDeleteAll(){
  		document.forms[0].action = "${basePath}tax/info_deleteSelected.action";
  		document.forms[0].submit();
  	}
	//异步发布信息,信息的id以及将要改成的状态值
	function doPublic(infoId,state){
		//1.更新信息状态
		$.ajax({
			url:"${basePath}tax/info_publicInfo.action",
			data:{"info.infoId":infoId,"info.state":state},
			type:"post",
			success:function(msg){
				//2.更新状态栏,操作栏的显示值
				if("更新状态成功"==msg){
					if(state==1){
						//说明信息状态已经被改成发布,操作栏被改为停用
						$("#show_"+infoId).html("发布");
						$("#oper_"+infoId).html('<a href="javascript:doPublic(\''+infoId+'\',0)">停用</a>');
					}else{
						$("#show_"+infoId).html("停用");
						$("#oper_"+infoId).html('<a href="javascript:doPublic(\''+infoId+'\',1)">发布</a>');
					}
				}else{
					alert("更新信息状态失败!");
				}
			},
			error:function(){
				alert("更新信息状态失败!");
			}
		});
		
	}	
	function doSearch(){
		document.forms[0].action = "${basePath}tax/info_listUI.action";
  		document.forms[0].submit();
	}
    </script>
</head>
<body class="rightBody">
<form name="form1" action="" method="post">
    <div class="p_d_1">
        <div class="p_d_1_1">
            <div class="content_info">
                <div class="c_crumbs"><div><b></b><strong>信息发布管理</strong></div> </div>
                <div class="search_art">
                    <li>
                        信息标题:<s:textfield name="info.title" cssClass="s_text" id="infoTitle"  cssStyle="width:160px;"/>
                    </li>
                    <li><input type="button" class="s_button" value="搜 索" onclick="doSearch()"/></li>
                    <li style="float:right;">
                        <input type="button" value="新增" class="s_button" onclick="doAdd()"/> 
                        <input type="button" value="删除" class="s_button" onclick="doDeleteAll()"/> 
                    </li>
                </div>


                <div class="t_list" style="margin:0px; border:0px none;">
                    <table width="100%" border="0">
                        <tr class="t_tit">
                            <td width="30" align="center"><input type="checkbox" id="selAll" onclick="doSelectAll()" /></td>
                            <td align="center">信息标题</td>
                            <td width="120" align="center">信息分类</td>
                            <td width="120" align="center">创建人</td>
                            <td width="140" align="center">创建时间</td>
                            <td width="80" align="center">状态</td>
                            <td width="120" align="center">操作</td>
                        </tr>
                        <s:iterator value="pageResult.items" status="st">
                            <tr <s:if test="#st.odd"> bgcolor="f8f8f8" </s:if> >
                                <td align="center"><input type="checkbox" name="selectedRow" value="<s:property value='infoId'/>"/></td>
                                <td align="center"><s:property value="title"/></td>
                                <td align="center">
                                	<s:property value="#infoTypeMap[type]"/>	
                                </td>
                                <td align="center"><s:property value="creator"/></td>
                                <td align="center"><s:date name="createTime" format="yyyy-MM-dd HH:mm"/></td>
                                <td id="show_<s:property value='infoId'/>" align="center"><s:property value="state==1?'发布':'停用'"/></td>
                                <td align="center">
                                	<span id="oper_<s:property value='infoId'/>">
                                	<s:if test="state==1">
                                		<a href="javascript:doPublic('<s:property value='infoId'/>',0)">停用</a>
                                	</s:if><s:else>
                                		<a href="javascript:doPublic('<s:property value='infoId'/>',1)">发布</a>
                                	</s:else>
                                	</span>
                                    <a href="javascript:doEdit('<s:property value='infoId'/>')">编辑</a>
                                    <a href="javascript:doDelete('<s:property value='infoId'/>')">删除</a>
                                </td>
                            </tr>
                        </s:iterator>
                    </table>
                </div>
            </div>
        <div class="c_pate" style="margin-top: 5px;">
        <!-- 如果页数为空不显示分页选项 -->
        <s:if test="pageResult.totalCount > 0">
		<table width="100%" class="pageDown" border="0" cellspacing="0"
			cellpadding="0">
			<tr>
				<td align="right">
                 	总共<s:property value="pageResult.totalCount"/>条记录,当前第 <s:property value="pageResult.pageNo"/> 页,
                 	共 <s:property value="pageResult.totalPageCount"/> 页 
                 	<!-- 非第一页才有“上一页”选项 -->
                 	<s:if test="pageResult.pageNo>1">
                 		  <a href="javascript:doGoPage(<s:property value='pageResult.pageNo-1'/>)">上一页</a>
                    </s:if>
                    <!-- 非最后一页才有“下一页”选项 -->
                    <s:if test="pageResult.pageNo < pageResult.totalPageCount">
                          <a href="javascript:doGoPage(<s:property value='pageResult.pageNo+1'/>)">下一页</a>
                    </s:if>
					到 <input id="pageNo" name="pageNo" type="text" style="width: 30px;" onkeypress="if(event.keyCode == 13){doGoPage(this.value);}" min="1"
					max="" value="<s:property value="pageResult.pageNo"/>" />   
			    </td>
			</tr>
		</table>
		</s:if><s:else>暂无数据!</s:else>	
        </div>
		<script type="text/javascript">
		//翻页方法
		function doGoPage(pageNo){
			document.getElementById("pageNo").value = pageNo;
			document.forms[0].action="${basePath}tax/info_listUI.action";
			document.forms[0].submit();
		}
		</script>
        </div>
    </div>
</form>


</body>
</html>

我们下面来测试,我们之前在信息发布区域管理存了8条新闻,按照我们预想的,我们每次只取出4条数据(pageSize默认为4),然后一共8条记录,一共是2页,我们来点击看一下是不是这样:


结果如我们所想,点击下一页的时候可以看到剩下的四条新闻:

至此我们的分页功能完成。下一次我们进行优化

转载请注明出处:http://blog.csdn.net/acmman/article/details/49942621

相关文章
|
3天前
|
分布式计算 Hadoop Shell
使用shell脚本实现自动SSH互信功能
使用shell脚本实现自动SSH互信功能
13 1
|
9月前
|
Ubuntu 关系型数据库 网络安全
基于docker搭建gitea私服仓库,并开启https访问、ssh访问和邮箱验证通知功能
基于docker搭建gitea私服仓库,并开启https访问、ssh访问和邮箱验证通知功能
801 1
基于docker搭建gitea私服仓库,并开启https访问、ssh访问和邮箱验证通知功能
|
应用服务中间件 Linux Shell
06_Linux基础-NGINX和浏览器、网页的关系-云服务器ssh登陆-安装NGINX-上传网页-压缩命令-xz-gzip-bzip2-zip-tar-配置NGINX服务器支持下载功能-备份脚本
NGINX和浏览器、网页的关系-云服务器ssh登陆-安装NGINX-上传网页-压缩命令-xz-gzip-bzip2-zip-tar-配置NGINX服务器支持下载功能-备份脚本
198 0
06_Linux基础-NGINX和浏览器、网页的关系-云服务器ssh登陆-安装NGINX-上传网页-压缩命令-xz-gzip-bzip2-zip-tar-配置NGINX服务器支持下载功能-备份脚本
|
Java 网络安全
SSH开发项目:实现一组功能的步骤
本文主要讲实现一组功能的步骤
127 0
|
XML 网络安全 数据格式
ssh框架之struts2文件下载功能代码
版权声明:本文为博主原创文章,如需转载,请标明出处。 https://blog.csdn.net/alan_liuyue/article/details/72764335 一、前言   上一篇博客我们了解了ssh框架的springmvc的文件下载功能,它在方法里面并不需要设置返回的http的类型和标题,但也能自动弹出下载框,这就是框架本身的一个优点,封装了原生java的方法。
1013 0
|
JSON Java 程序员
ssh框架之springmvc文件下载功能代码
版权声明:本文为博主原创文章,如需转载,请标明出处。 https://blog.csdn.net/alan_liuyue/article/details/72771926 一、前言   上一篇文章我们了解了,通过Java的io输出流来实现普通的文件下载的功能,是广大程序员在做项目中会普遍使用到的下载文件的方法。
866 0
|
Java 网络安全 Spring
SSH(STRUTS2+SPRING+HIBERNATE)实现文件上传功能
首先是上传页面(upload.jsp) 主要代码如下,其中文件字段按自己所需可以改,但在Action中也必须增减相应字段来接受, [java] view plaincopy         ...
1014 0
|
3天前
|
安全 Linux Shell
Linux SSH(Secure Shell)服务
Linux SSH提供安全网络协议,使用公钥加密技术确保远程服务传输安全。OpenSSH是实现SSH服务的免费开源工具,允许用户加密连接远程登录Linux服务器执行任务。SSH比Telnet更安全,防止数据被截获。SSH还支持端口转发和隧道,广泛应用于系统管理和网络维护,是安全远程访问服务器的重要工具。
28 1
|
3天前
|
安全 Shell Linux
【Shell 命令集合 文件管理】Linux ssh 远程主机之间复制文件 scp 命令使用教程
【Shell 命令集合 文件管理】Linux ssh 远程主机之间复制文件 scp 命令使用教程
45 0
|
3天前
|
Linux 网络安全 数据安全/隐私保护
SSH工具连接远程服务器或者本地Linux系统
SSH工具连接远程服务器或者本地Linux系统
24 0