`
galo
  • 浏览: 37383 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

js通用分页方法

JSP 
阅读更多
Java后台:

public class PageEntity {
	
	private int page;//当前页码
	private int total;//一共多少条
	private int totalPage;//一共多少页
	private int firstResult;//当前首记录
	private int lastResult;//当前尾记录
	private int pageSize = 10; //每页几条数据
	public int getPage() {
		return page;
	}
	public void setPage(int page) {
		this.page = page;
	}
	public int getTotal() {
		return total;
	}
	public void setTotal(int total) {
		this.total = total;
	}
	public int getTotalPage() {
		return totalPage;
	}
	public void setTotalPage(int totalPage) {
		this.totalPage = totalPage;
	}
	public int getFirstResult() {
		return firstResult;
	}
	public void setFirstResult(int firstResult) {
		this.firstResult = firstResult;
	}
	public int getLastResult() {
		return lastResult;
	}
	public void setLastResult(int lastResult) {
		this.lastResult = lastResult;
	}
	public int getPageSize() {
		return pageSize;
	}
	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}
	
}


//这里注意page必须在firstResult之前计算
public PageEntity getPageEntity(HttpServletRequest request,GenericIface entityDao,String where) {
		
		String strPage = request.getParameter("page") == null ? "1":request.getParameter("page");
		int page = Integer.parseInt(strPage);//要查询的页数
		int total = entityDao.findNumber(where);//当前数据库总记录数
		
		int pageSize = 20;//每页要显示的记录
		int firstResult = 0;//起始记录
		int lastResult = 0;//末尾记录
		int totalPage = 0;
		if(total > 0){
			
			totalPage = (total + pageSize -1)/pageSize;
			
			if(page == -1){
				
				page = totalPage;
			}else if(page < 1){
				
				page = 1;
			}else if(page > totalPage){
				
				page = totalPage;
			}
			firstResult = (page-1)*pageSize;
			lastResult = firstResult + pageSize;
		}else{
			//如果没有记录  则清零  因为页面有加1处理  所以firstResult=-1
			page = 0;
			firstResult = -1;
			lastResult = 0;
		}
		
		PageEntity pageEntity = new PageEntity();
		pageEntity.setFirstResult(firstResult);
		pageEntity.setLastResult(lastResult);
		pageEntity.setPage(page);
		pageEntity.setTotal(total);
		pageEntity.setTotalPage(totalPage);
		pageEntity.setPageSize(pageSize);
		
		return pageEntity;
		
	}


前台js:
//分页程序 1表示第一页 2表示上一页 3表示下一页 4表示尾页
function changePage(e){
	
	var page = document.getElementById("nowPage") == null ? "1":document.getElementById("nowPage").value;
	switch(e){
		
		case 1:page=1;break;
		case 2:page--;break;
		case 3:page++;break;
		case 4:page=-1;break;
	}
	var url = "action.do?page=" + page + getCondition(page);
	document.location.href = url;
}

function forwardPage(){
	
	var page = document.getElementById("nowPage") == null ? "1":document.getElementById("nowPage").value;
	var exp = /^(0|[1-9]\d*)$/;
	var result = page.match(exp);
	if(result != null){
	
		var url = " action.do?page=" + page + getCondition(page);
		document.location.href = url;
	}else{
		
		alert("请输入合法数字!");
	}
}


Jsp页面:
<div id="page" class="w_872 mrg_s10">
<label><input name="" type="button" class="tnleft1" onClick="changePage(1)" title="首页" /></label>
<label><input name="" type="button" class="tnleft2" onClick="changePage(2)" title="上一页" /></label>
<label class="fo">页码 <input type="text" class="input5" id="nowPage" value="${pageEntity.page }" onblur="forwardPage()"> of <span>${pageEntity.totalPage }</span></label>
<label><input name="" type="button" class="tnrig2" onClick="changePage(3)" title="下一页" /></label>
<label><input name="" type="button" class="tnrig1" onClick="changePage(4)" title="尾页" /></label>
<label class="rig"><span>${pageEntity.firstResult+1 }</span> to <span>${pageEntity.lastResult }</span>,共<span>${pageEntity.total }</span>条</label>
</div>


页面效果展示:
 

  • 大小: 4.8 KB
0
0
分享到:
评论

相关推荐

    超强php分页打包 通用分页 万能分页 ajax分页 google分页

    万能分页进一步扩展了通用分页的概念,除了基本的前后翻页外,可能还包括跳转到指定页的功能,以及当前页数、总页数和总记录数的显示。它需要考虑到更多的边缘情况,如空数据时的分页展示。 AJAX分页是一种无刷新的...

    通用分页的使用方法以及原理

    在后台接收后,调用相应的分页方法,获取当前页数据并返回给前端。前端根据返回的数据进行渲染,显示在页面上。 分页原理可以概括为以下三点: 1. 利用嵌套SQL查询实现分页,如`SELECT Top 页大小 * FROM 表名 ...

    经典,通用的JS分页处理

    经典 非常好用的纯JS分页处理。 有详细的使用方法,说明。 如有问题,请加群讨论:47755280

    JAVA写的通用分页

    本文将详细探讨"JAVA写的通用分页"这一主题,结合描述中的"通用高效分页存储过程实现",我们将深入理解Java分页的原理、实现方式以及优化策略。 首先,分页的基本概念是将大量数据分块展示,而不是一次性加载所有...

    通用分页js

    本文介绍了“通用分页JS”在JSP环境下的使用方法及其核心功能。通过分析代码逻辑,我们可以看到这是一个简单实用的分页解决方案。对于希望快速实现分页功能的开发者来说,该脚本提供了很好的参考价值。同时,我们还...

    Java 通用分页

    本文将详细探讨Java中的通用分页实现方法。 首先,我们要理解分页的基本概念。分页主要包括两个关键参数:当前页码(Page Number)和每页显示条数(Page Size)。通过这两个参数,我们可以计算出当前页面应该显示的...

    (四)struts2- 2.3.15.3 spring3.2.4 mybatis-3.2.3 通用分页(不同数据库) 拦截器(2014-01-27 17:16)

    这个压缩包文件可能是某个项目的一部分,其中包含了一个实现通用分页功能以及使用拦截器的示例。 Struts2是一个强大的MVC框架,它提供了一种组织应用程序的方式,使得业务逻辑与展示逻辑分离。版本2.3.15.3是Struts...

    Ajax通用分页控件源码v1.0.2

    这两种方法各有优缺点,适用于不同的场景,Ajax通用分页控件同时支持这两种方式,为开发者提供了更大的灵活性。 AjaxPagerPro这个文件名可能是该控件的主程序或者库文件,可能包含了实现分页功能的JavaScript代码、...

    accss, mysql asp通用分页自定义分页样式

    这里的"accss,mysql,asp通用分页,自定义分页样式"就是一个关于如何在ASP(Active Server Pages)环境下,结合Access和MySQL数据库实现分页功能,并且自定义分页样式的主题。 首先,让我们从数据库层面理解。...

    整合了springMVC和通用分页以及通用mapper的框架

    这个名为"整合了springMVC和通用分页以及通用mapper的框架"的项目,就是针对这一目标而设计的。它结合了SpringMVC、通用分页和通用Mapper三个核心组件,为Web应用程序提供了强大的数据访问和页面展示能力。 ...

    分页导航通用类和js

    总的来说,这个“分页导航通用类和js”项目提供了一种实现客户端分页的方法,结合jQuery,可以方便地在各种Web应用中实现高效且灵活的分页功能。通过理解和应用这些技术,开发者可以优化用户体验,提高网页加载速度...

    一个通用的JavaScript分页

    以下是对这个通用JavaScript分页实现的详细解析: 1. **变量定义**: - `totalNum`:总记录数,表示数据源中的条目总数。 - `maxNum`:每页显示的最大记录数,即每一页可以显示多少条数据。 - `pageUrl`:分页...

    Ajax通用分页源码(ASP.NET)

    本资源提供的“Ajax通用分页源码”正是这样一个功能模块,它允许用户在浏览大量数据时,只加载当前所需的页面内容,从而提高网页性能和用户交互性。 首先,让我们了解Ajax分页的基本原理。在ASP.NET中,分页通常...

    自定义通用分页一行代码解决分页问题

    本主题围绕“自定义通用分页一行代码解决分页问题”展开,介绍如何通过提供的BaseDao、PageBean分页工具类以及PageBeanTag助手类实现高效且简洁的分页功能。 首先,`BaseDao`是数据库操作的基类,通常包含了基本的...

    jsp-web开发通用分页标签

    综上所述,"jsp-web开发通用分页标签"是通过创建自定义JSP标签来实现的一种高效、灵活的分页解决方案,能够适应不同项目需求,并优化用户体验。通过学习和实践,开发者可以更好地掌握Web开发中的分页技术,提升项目...

    通用分页插件.rar

    《通用分页插件——高效实现网页数据分页的利器》 在网页开发中,当数据量过大时,一次性加载所有信息会导致页面加载速度变慢,用户体验下降。为了解决这个问题,分页技术应运而生。通用jQuery分页插件就是其中的一...

    通用javascript分页

    总结,`通用javascript分页`项目提供了一种跨语言的JavaScript分页解决方案,通过JavaScript和CSS实现动态分页,提高网页加载速度和用户体验。理解其工作原理和使用方法,有助于我们更好地在实际项目中应用和定制...

    通用分页标签(原创)

    在提供的压缩包文件"Page"中,可能包含了实现这个通用分页标签的相关代码,例如HTML、CSS和JavaScript文件。开发者可以通过查看源码了解其内部工作机制,并可以根据自己的项目需求进行调整和定制。通过学习和理解这...

    通用分页控件及Demo源码

    本资源"通用分页控件及Demo源码"提供了一个纯服务器端的分页解决方案,尤其适用于ASP.NET Web应用程序开发。下面我们将详细探讨这个控件及其相关知识点。 1. **纯服务器端控件**: - 通常,分页功能的实现可以通过...

    jquery通用分页类

    本资源提供了一个基于jQuery的通用分页类,它支持两种不同的样式,适应不同设计需求。现在,我们将详细探讨jQuery分页类的工作原理、实现方式以及如何在实际项目中应用。 首先,jQuery分页类是通过JavaScript库...

Global site tag (gtag.js) - Google Analytics