一个通用的JavaScript分页

时间：2014-07-24 22:02:52 阅读：339 评论：0 收藏：0 [点我收藏+]

标签：style http java color 使用 os io art

1.JavaScript代码

Java代码

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代码

Java代码

/* 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; #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.使用例子

Java代码

<!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);//当前所在第几页
page.initPage("page");//初始化页面
function pagination_data()
{
alert(page.getIndexPage()+":"+page.getMaxNum());
}
</script>
</body>
</html>

一个通用的JavaScript分页,布布扣,bubuko.com

一个通用的JavaScript分页

标签：style http java color 使用 os io art

原文地址：http://www.cnblogs.com/xiaochao12345/p/3866095.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行