`

分页栏

阅读更多
DAO层的代码分页代码:
public PageModel findByPageModel(String hql,PageModel pm) {
		pm.setTotalCount(this.getHibernateTemplate().find(hql).size());
		pm.setGoToHref(ServletActionContext.getRequest().getServletPath().replace("/",""));
		int totalCount = pm.getTotalCount();
		int pageSize = pm.getPageSize();
		int totalPage = (totalCount+pageSize-1)/pageSize ;
		int currentPage = pm.getCurrentPage() ;
		pm.setTotalPage(totalPage);
		int offset = (currentPage-1)*pageSize;
		pm.setList(this.getSession().createQuery(hql).setFirstResult(offset).setMaxResults(pageSize).list());
		return pm;
	}


分页的JAVABEAN:
public class PageModel {
	private int currentPage;
	private int pageSize;
	private int totalCount;
	private int totalPage;
	private List list ;
	private String goToHref;
	
	public int getCurrentPage() {
		if(currentPage<=0) currentPage=1;
		return currentPage;
	}
	public void setCurrentPage(int currentPage) {
		this.currentPage = currentPage;
	}
	public int getPageSize() {
		if(pageSize<=0) pageSize=10;
		return pageSize;
	}
	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}
	public int getTotalCount() {
		return totalCount;
	}
	public void setTotalCount(int totalCount) {
		this.totalCount = totalCount;
	}
	public int getTotalPage() {
		return totalPage;
	}
	public void setTotalPage(int totalPage) {
		this.totalPage = totalPage;
	}
	public List getList() {
		return list;
	}
	public void setList(List list) {
		this.list = list;
	}
	public String getGoToHref() {
		return goToHref;
	}
	public void setGoToHref(String goToHref) {
		this.goToHref = goToHref;
	}
}


JSP页面:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<link rel="stylesheet" type="text/css" href="<%=basePath %>findByHql/pagingBar/css/pagingBar.css">

	<input type="button" class="firstPage commonPage"  alt="首页"   title="首页"/>
	<input type="button" class="beforePage commonPage" alt="上一页" title="上一页"/>
	<input type="button" class="nextPage commonPage"   alt="下一页" title="下一页"/>
	<input type="button" class="lastPage commonPage"   alt="尾页"   title="尾页" />
	
	<input type="hidden" id="currentPage" value="${requestScope.pm.currentPage }" />
	<input type="hidden" id="totalPage"	value="${requestScope.pm.totalPage }" />
	<input type="hidden" id="goToHref"	value="${requestScope.pm.goToHref }" />
	
	<span class="cp">当前第${requestScope.pm.currentPage }页</span>
	<span class="tc"> 相关资讯:${requestScope.pm.totalCount }条</span>
	<span class="ps">每页${requestScope.pm.pageSize }条 </span>
	<span class="tp">共${requestScope.pm.totalPage}页</span>

<script type="text/javascript" src="<%=basePath%>js/jquery.js"></script>
<script type="text/javascript">
	(function($) {
		var currentPage = parseInt($('#currentPage').val());
		var totalPage = parseInt($('#totalPage').val());
		var toHref = $('#goToHref').val();
		$('.firstPage').bind('click', function() {
			goToHref(1);
		});
		$('.nextPage').bind('click', function() {
			if (currentPage >= totalPage)
				goToHref(totalPage);
			else
				goToHref(currentPage + 1);
		});
		$('.beforePage').bind('click', function() {
			if (currentPage <= 1)
				goToHref(1);
			else
				goToHref(currentPage - 1);
		});
		$('.lastPage').bind('click', function() {
			goToHref(totalPage);
		});
		function goToHref(cp) {
			document.location.href = toHref+"?currentPage=" + cp;
		}
	})(jQuery)
</script>


CSS:下面有几张图片需要自己找...
/*点击栏*/
.commonPage{
	width: 16px;
	height: 16px;
	border: none;
	cursor: pointer;
}
.firstPage{
	background: url("../images/page-first.png") no-repeat;
}

.nextPage{
	background: url("../images/page-next.png") no-repeat;
}

.beforePage{
	background: url("../images/page-prev.png") no-repeat;
}

.lastPage{
	background: url("../images/page-last.png") no-repeat;
}

/*显示栏*/
.cp,.tc,.ps,.tp{
	font-size: 14px;
}

在action中调用DAO层的方法,给currentPage和pageSize设置初始值,然后就返回一个list到你分页的页面迭代,以后就直接嵌套在分页页面中就行
0
0
分享到:
评论

相关推荐

    bootstrap table 分页栏修改

    在本项目中,我们关注的是如何自定义Bootstrap Table的分页栏,使其外观和功能更接近jqGrid。 首先,jqGrid是一款强大的jQuery插件,主要用于处理和展示大量的数据,其分页栏功能强大,样式精致。在Bootstrap Table...

    QTableWidget,QTableView分页的分页栏

    本文将深入探讨如何在`QTableWidget`和`QTableView`中实现分页栏。 首先,我们需要理解`QTableWidget`和`QTableView`的区别。`QTableWidget`是基于`QWidget`的,它提供了完整的表格功能,包括数据编辑、行/列添加...

    QTableWidget,QTableView分页的分页栏使用demo

    本文将深入探讨如何在QTableWidget和QTableView中实现分页栏的使用,主要参考了博客《QTableWidget,QTableView分页的分页栏使用demo》。 首先,QTableWidget是一个直观且易于使用的表格控件,它提供了完整的表格...

    ios-分页栏 升级.zip

    在iOS开发中,分页栏(Segmented Control)是一种常见的用户界面元素,它允许用户在多个视图或内容之间进行切换。"ios-分页栏 升级.zip" 文件很可能包含了一个更新或改进的分页栏组件,可能是开源项目的一部分,可以...

    使用AJAX动态生成table表格数据和jquery.pagination.js 的分页栏

    首先,在HTML中添加一个div元素作为分页栏的容器。然后,我们需要在jQuery文档加载完成后初始化分页插件。配置项可以包括总页数、每页显示的记录数、当前页数等。例如: ```javascript $("#pagination").pagination...

    vue实现分页栏效果

    使用Vue.js框架来实现分页栏效果可以大大提高用户体验。它能够帮助开发者有效地组织和管理页面上显示的数据,并允许用户通过分页栏来浏览不同的数据页面。接下来,我们将详细介绍Vue实现分页栏效果的步骤和方法。 ...

    domino xpages 开发 视图view视图分页栏加按钮

    Domino XPages 视图视图分页栏加按钮开发 在 Domino XPages 开发中,视图(View)是非常重要的组件之一。视图可以用来显示数据,并提供了丰富的功能来格式化和自定义数据的显示方式。在本文中,我们将介绍如何在 ...

    DHTMLX grid复制以及分页栏跳转

    1. **分页栏**:在Grid下方显示分页栏,提供页码和每页记录数的选择。 2. **分页大小**:用户可以选择每页显示的记录数,这通常通过下拉菜单或输入框实现。 3. **页码跳转**:用户可以直接输入页码并跳转到指定页。 ...

    ios-电商分页栏 支持联动.zip

    在iOS开发中,电商平台的分页栏是一种常见的用户界面元素,它允许用户在多个类别或商品之间进行切换,同时提供了一种优雅的方式来展示大量的内容。本项目“ios-电商分页栏 支持联动.zip”显然是一个实现了这种功能的...

    jquery js+php+html5+css3分页栏生成及数据取出代码

    《js分页栏生成及数据取出》 使用方法说明 使用jquery php html5 css3来编写的js分页代码,方便大家进行稍加修改之后应用与自己的web页面或者站点。 如果需要观看demo可以查看: http://sunshine.ztime.net 一个...

    一个简单的分页栏包括长度Menui18n支持基于Vue2x

    在这个“一个简单的分页栏包括长度Menui18n支持基于Vue2.x”的项目中,我们可以探讨几个关键的知识点,包括Vue2.x的基本使用、分页组件的实现、菜单(Menu)的构建以及国际化(i18n)支持。 首先,Vue2.x是Vue.js...

    分页栏的web标准实现

    分页栏是网页设计中的重要组成部分,特别是在处理大量数据或内容时,它允许用户便捷地浏览和导航。在Web 2.0标准中,分页栏的设计和实现更注重用户体验和交互性。本文将深入探讨一种分页栏的实现方法,并分析其关键...

    layui的分页栏,laypage.js

    layui的分页栏,laypage.js

    IOS 入门开发之分页栏TableBar的使用

    TableBar是UIKit框架中的UITabBarController类的实例,它提供了底部的分页栏,通常包含多个标签,每个标签对应一个单独的ViewController。当用户点击某个标签时,会显示相应的页面内容。 要开始使用TableBar,你...

    分页组件extremeComponents的使用

    4. **自定义样式**:开发者可以根据自己的需求,通过CSS样式定制分页栏的外观,使其与项目整体风格保持一致。 5. **事件监听**:提供了丰富的事件接口,如页码改变、分页操作完成等,方便开发者进行额外的业务逻辑...

    layui分页及日期控件中文显示乱码.zip

    layui分页及日期控件中文显示乱码,下载后解压...文件主要适用于前端及时开发,解决layui部分功能显示出现乱码问题,主要涉及到表格渲染后分页栏工具中文显示乱码,以及使用layui日期控件所显示的日期中文乱码问题。

    微信小程序模板之分页滑动栏

    1.分页栏与滑动视图绑定 2.点击分页栏自动滑动到对应视图 3.滑动的到视图对应分页栏自动显示选中样式 效果图 上代码 wxml 分页标签1 &lt;view class={{tabArr.tabCurrentIndex==1?'active':''}}

    分页效果自己编写的

    2. **显示分页栏**:通常会显示一个包含数字的列表,表示可选的页码。例如,如果总页数为10,可能会显示`[1, 2, 3, ..., 9, 10]`,用户可以直接点击这些数字进行跳转。 3. **当前页处理**:需要维护一个变量来跟踪...

Global site tag (gtag.js) - Google Analytics