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

一个通用的JavaScript分页

阅读更多

1.JavaScript代码

Pagination=function(id)
{
	var totalNum=0;
    var maxNum=10;
	var pageUrl="";
	var breakpage = 5;
	var currentposition = 0;
	var breakspace = 2;
	var maxspace = 4;
	var currentpage=1;
	var perpage=10;
	var id =id;
	this.initPage = function(pageName)
	{
			var count = this.getTotalNum();
			 perpage = this.getMaxNum();	
			if (currentpage==null){
				currentpage = 1;
			}else{
				currentpage = parseInt(currentpage);
			}
			var pagecount = Math.floor(count/perpage)+1;
			
			var pagestr = "";
			var prevnum = currentpage-currentposition;
			var nextnum = currentpage+currentposition;
			if(prevnum<1) prevnum = 1;
			if(nextnum>pagecount) nextnum = pagecount;
			pagestr += (currentpage==1)?'<span class="disabled"> <上一页</span>':'<span><a  href="javascript:'+pageName+'.page_onclick('+(this.getIndexPage()-1)+',\''+pageName+'\')"><上一页</a></span>';
			if(prevnum-breakspace>maxspace){
				for(i=1;i<=breakspace;i++)
				pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>';
				pagestr += '...';
				for(i=pagecount-breakpage+1;i<prevnum;i++)
					pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>';
			}else{
				for(i=1;i<prevnum;i++)
				pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>';
			}
			for(i=prevnum;i<=nextnum;i++){
				pagestr += (currentpage==i)?'<span class="current">'+i+'</span>':'<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>';
			}
			if(pagecount-breakspace-nextnum+1>maxspace){
				for(i=nextnum+1;i<=breakpage;i++)
					pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>';
				pagestr += '<span class="break">...</span>';
				for(i=pagecount-breakspace+1;i<=pagecount;i++)
					pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>';
			}else{
				for(i=nextnum+1;i<=pagecount;i++)
						pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>';
			}
			pagestr += (currentpage==pagecount)?'<span class="disabled">下一页  ></span>':'<a href="javascript:'+pageName+'.page_onclick('+(this.getIndexPage()+1)+',\''+pageName+'\')">下一页  ></a>';
		
		    this.$(id).className="manu"
		    this.$(id).innerHTML=pagestr;
	}
	this.getTotalNum = function()
	{
		return totalNum;
	};
	this.setTotalNum = function(sTotalNum)
	{
		totalNum = sTotalNum;
	};
	this.getMaxNum = function()
	{
		return maxNum;
	};
	this.setMaxNum=function(sMaxNum)
	{
		maxNum = sMaxNum;
	};
	this.getIndexPage = function()
	{
		return currentpage;
	};
	this.setIndexPage=function(sCurrentPage)
	{
		currentpage =sCurrentPage;
	};	
	this.page_onclick=function(num,pageStr)
	{
	  this.setIndexPage(num);
	  pagination_data();
	  this.initPage(pageStr);
	};
	this.$=function(objStr)
	{
		return document.getElementById(objStr);
	}

}
function $(objStr)
{
	return document.getElementById(objStr);
}
function pagination_data()
{
}

  2.CSS代码

 

/* CSS Document */
	/* Paginator */
a img {blr:expression(this.onFocus=this.blur())}
area {blr:expression(this.onFocus=this.blur())}
		
.manu {
	PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center; FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}
.manu A {
	BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #036cb4; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid; TEXT-DECORATION: none
}
.manu A:hover {
	BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid
}
.manu A:active {
	BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid
}
.manu .current {
	BORDER-RIGHT: #036cb4 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #036cb4 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #036cb4 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #036cb4 1px solid; BACKGROUND-COLOR: #036cb4
}
.manu .disabled {
	BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}

 

 3.使用例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@include file="/common/taglibs/taglibs.jsp"%>
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<link
			href="${pageContext.request.contextPath}/common/css/pagination.css"
			rel="stylesheet" type="text/css" />
		<script
			src="${pageContext.request.contextPath}/common/js/page-common.js"></script>
	</head>
	<body>


<div id="12333"></div>
<script>
	var page = new Pagination("12333");
	page.setTotalNum(1000);//总共有多少条
	page.setMaxNum(20);//每页显示的条数
       page.setIndexPage(1);//当前所在第几页
&nbsp;      page.initPage("page");//初始化页面
	function pagination_data()
	{
		alert(page.getIndexPage()+":"+page.getMaxNum());
	}
</script>
	</body>
</html>

 

分享到:
评论

相关推荐

    通用javascript分页

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

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

    通用分页则是指设计一个可以适应多种场景的分页组件,它可能包含以下特性: 1. 参数化配置:允许用户自定义每页显示的记录数。 2. URL路由处理:支持参数传递,如通过`?page=2`来表示第2页。 3. 多种样式支持:提供...

    分页导航通用类和js

    本文将详细介绍一个通用的分页导航类和JavaScript实现,以及如何结合jQuery进行应用。 首先,我们要理解什么是内存分页。内存分页是指在客户端(浏览器)进行数据的分页处理,而不是像服务器端分页那样由服务器处理...

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

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

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

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

    通用分页js

    本文将深入解析一个名为“通用分页JS”的脚本,该脚本适用于JSP环境中,能够帮助开发者轻松实现数据分页显示的功能。 #### 二、核心概念解释 1. **分页**:指将数据集合按照一定的规则(如每页显示的数据数量)...

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

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

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

    总结一下,Ajax通用分页控件v1.0.2是一个用于Webform和MVC项目的组件,它利用Ajax技术实现了无刷新的分页效果,提供了两种分页算法供选择,并且包含了一个名为AjaxPagerPro的核心文件。在实际开发中,开发者可以灵活...

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

    在IT行业中,开发高效、可复用的代码是提高生产力的关键。...通过整合SpringMVC的控制层,通用Mapper的数据访问层,以及通用分页的查询优化,它降低了开发复杂度,提高了开发效率,是企业级开发中的一个实用工具。

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

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

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

    通常,一个分页系统由三部分组成:控制后台的类(如PageMethod)、前端显示控制类(如Pager)以及数据库连接类(如DBHelper)。PageMethod类负责处理分页逻辑,通过接收当前页数和连接对象来获取所需的数据。Pager类...

    jsp-web开发通用分页标签

    本教程将详细讲解如何使用JSP(JavaServer Pages)技术来实现一个通用的分页标签,以便在各种项目中复用。 首先,JSP是Java平台上的动态网页技术,它允许开发人员在HTML或者XML文档中嵌入Java代码。在分页场景下,...

    通用分页标签(原创)

    这里我们讨论的“通用分页标签”是一个原创的解决方案,它旨在简化和标准化分页功能的实现,使得开发者能够更方便地在项目中应用。描述中提到的显示样式是模仿Google的风格设计的,这可能意味着该分页标签提供了类似...

    通用分页插件.rar

    jQuery是一个强大的JavaScript库,它的简洁API使得处理DOM操作变得异常简单。分页插件利用jQuery的这一特性,通过监听用户的翻页操作,动态加载或隐藏相应的数据块,实现页面内容的切换。这种方法不仅减少了页面的...

    通用分页控件及Demo源码

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

    jquery通用分页类

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

    一个ajax分页的公共类

    这个“一个ajax分页的公共类”提供了一个通用的解决方案,可以被多个页面或项目复用,减少了重复代码,提高了开发效率。 1. **Ajax基础** Ajax的核心是通过JavaScript创建XMLHttpRequest对象,向服务器发送异步...

    很好的通用分页

    "很好的通用分页"是指一个高效且可复用的分页解决方案,它允许开发者轻松地在自己的应用中实现分页功能,只需要简单的复制和粘贴代码,大大提高了开发效率。 PageBean是Java Web开发中用于处理分页数据的一个对象,...

    jquery实现数组array、集合list、json类型的分页支持多个分页

    在实际应用中,我们通常会封装一个通用的分页插件或函数,以减少重复代码。这个函数接受参数如数据源、每页数量、当前页数等,然后根据这些参数进行必要的计算和DOM更新。为了扩展功能,可以添加自定义事件或者回调...

Global site tag (gtag.js) - Google Analytics