MyPager js简单分页控件

花了点时间做了一个简单的Js分页控件.

使用方法如下:

一.基本的用法

<script type="text/javascript">
new MyPager(15,10,1).init();
/**
第一个参数表示总记录数，例如查询学生，查询到的学生总数
第二个参数表示分页大小 ，每页多少个学生
第三个参数表示当前是第几页
**/
</script>

二.所有属性的用法

<script type="text/javascript">
function predo(){
alert("在进入下一页前执行！");
return true;
}
new MyPager(15,10,1,"saveuser.jsp","pagenum","predo").init();
/**
第一个参数表示总记录数，例如查询学生，查询到的学生总数
第二个参数表示分页大小 ，每页多少个学生
第三个参数表示当前是第几页
第四个参数表示分页时，表单要提交到的Action
第五个参数表示提交时，传递当前页值的表单name
第六个参数表示在分页前要执行的函数。(返回true才会进入下一页)
**/
</script>

相关文件内容

Mypager.js

----------------------------------------------------------------------------------------------------------------

/*** Js 分页控件 QQ172610236 2010-9-4 发布 ***/

var MypagerId=0;
//我的分页器 preDoName,在执行跳转到下一页时的这前执行的方法名是个字符串
var MyPager=function(total,pageS,nowP,url,nowPageInputName,preDoName){

this.itemTotal = total==undefined ? 0:total;//总条数
this.pageSize = pageS == undefined ? 10:pageS;//每页大小
this.nowPage = nowP==undefined ? 1:nowP;//当前页
this.lastPage=Math.ceil(this.itemTotal/this.pageSize);//最后一页
this.pagefn="H_goPage";//执行分页时的方法
this.nowPIN=nowPageInputName==undefined||nowPageInputName==""?"nowPage":nowPageInputName;//当前页的，hidden数据
this.outDivClassName="pagination";//最外层Div的ClassName
this.innerDivClassName="page-wrapper";//内层
this.innerFirstClassName="page-info";//内层第一个
this.ulClassName="page-control";//Ul的Classname
this.disableLiClassName="page-disable";//不可点击的按钮的样式
this.firstLiClassName="page-first";
this.prevLiClassName="page-prev";
this.nextLiClassName="page-next";
this.lastLiClassName="page-last";

//创建标签
this.init=function(){

/** 生成相应的HTML代码 **/
var tem = document.createElement('div');

var pagination = document.createElement('div');
pagination.className=this.outDivClassName;
tem.appendChild(pagination);

var wrapper = document.createElement('div');
wrapper.className=this.innerDivClassName;
pagination.appendChild(wrapper);

var innerFirstDiv = document.createElement('div');
innerFirstDiv.className=this.innerFirstClassName;
wrapper.appendChild(innerFirstDiv);
innerFirstDiv.innerHTML="共<span>"+ this.itemTotal +"</span>条记录 每页<span>"+ this.pageSize +"</span>条 当前第<span>"+ this.nowPage +"</span>/<span>"+ this.lastPage +"</span>页";


//创建ul
var pagerul = document.createElement('ul');
pagerul.className=this.ulClassName;
wrapper.appendChild(pagerul);
//第一页
var firstli = document.createElement('li');
if(this.nowPage==1||this.itemTotal==0){
firstli.className=this.firstLiClassName+" "+this.disableLiClassName;
firstli.innerHTML="<span>第一页</span>";
}else{
firstli.className=this.firstLiClassName;
firstli.innerHTML="<a onclick=\"if("+ preDoName +"!=undefined&&!"+ preDoName +"()) return false;MyPager.H_goPage(this,'"+ url +"',"+ this.lastPage + ",'"+ this.nowPIN + "_" + MypagerId +"','1');\" href=\"#\"><span>第一页</span></a>";
}
pagerul.appendChild(firstli);
//上一页
var prevli = document.createElement('li');
if(this.nowPage==1||this.itemTotal==0){
prevli.className=this.prevLiClassName+" "+this.disableLiClassName;
prevli.innerHTML="<span>上一页</span>";
}else{
prevli.className=this.prevLiClassName;
prevli.innerHTML="<a onclick=\"if("+ preDoName +"!=undefined&&!"+ preDoName +"()) return false;MyPager.H_goPage(this,'"+ url +"',"+ this.lastPage + ",'"+ this.nowPIN + "_" + MypagerId +"',"+(this.nowPage-1)+");\" href=\"#\"><span>上一页</span></a>";
}
pagerul.appendChild(prevli);
//下一页
var nextli = document.createElement('li');
if(this.nowPage==this.lastPage||this.itemTotal==0){
nextli.className=this.nextLiClassName+" "+this.disableLiClassName;
nextli.innerHTML="<span>下一页</span>";
}else{
nextli.className=this.nextLiClassName;
nextli.innerHTML="<a onclick=\"if("+ preDoName +"!=undefined&&!"+ preDoName +"()) return false;MyPager.H_goPage(this,'"+ url +"',"+ this.lastPage + ",'"+ this.nowPIN + "_" + MypagerId +"',"+(this.nowPage+1)+");\" href=\"#\"><span>下一页</span></a>";
}
pagerul.appendChild(nextli);
//最后一页
var lastli = document.createElement('li');
if(this.nowPage==this.lastPage||this.itemTotal==0){
lastli.className=this.lastLiClassName+" "+this.disableLiClassName;
lastli.innerHTML="<span>最后一页</span>";
}else{
lastli.className=this.lastLiClassName;
lastli.innerHTML="<a onclick=\"if("+ preDoName +"!=undefined&&!"+ preDoName +"())return false;MyPager.H_goPage(this,'"+ url +"',"+ this.lastPage + ",'"+ this.nowPIN + "_" + MypagerId +"',"+ this.lastPage+");\" href=\"#\"><span>最后一页</span></a>";
}
pagerul.appendChild(lastli);

//创建hidden input

var hideInput;
try{
hideInput = document.createElement('<input name="'+ this.nowPIN + '">' );
}catch(e){
hideInput=document.createElement("input");
hideInput.name=this.nowPIN;
}
hideInput.type="hidden";
hideInput.id=this.nowPIN + "_" + MypagerId ;
pagination.appendChild(hideInput);


document.write(tem.innerHTML);
};

//创建一个Pager就动态的记录生成的个数
MypagerId++;

};

//执行分页 aEl 链接Object
//nowPINId,表示当前页的隐藏字段的Id
//num 要转到的页
MyPager.H_goPage=function(aEl,url,lastPage,nowPINId,num){
if(num>lastPage||num<1) {alert("你访问的页不存在！"); return false;}
//根据el得到所在的form
var par=aEl.parentNode;
var nowTagN=par.tagName.toLowerCase();
while(nowTagN!="form" && par!=null && nowTagN !="body"){
par=par.parentNode;
if(par!=null)
nowTagN=par.tagName.toLowerCase();
}
if(par==null||nowTagN=="body"){
alert("Error!请把分页控件的创建脚本，放到表单中！");
return false;
}
var inpN=document.getElementById(nowPINId);
inpN.value=num;
if(url!=""&&url!=undefined&&url!='undefined'){
par.action=url;
}
par.submit();
}

MyPager.css

--------------------------------------------------------------------------------------------------------------

.pagination {
margin:0 auto;
padding:20px 10px;
width:600px;
}
.pagination .page-info {
float:left;
font-weight:bold;
margin-right:5px;
padding:0px 0 3px;
}

.pagination .page-control {
float:left;
font-weight:bold;
}

.pagination ul, .pagination ul li {
margin:0;
padding:0;
}
.pagination .page-control li {
float:left;
margin-right:5px;
padding-left:10px;
list-style:none outside none;
}
.pagination .page-control li {
color:#666666;
}
.pagination .page-control li a:link,.pagination .page-control li a:visited
{
color:#000000;
text-decoration:none;
}
.pagination .page-control li a:hover{
color:#00CCFF;
text-decoration:none;

}

-------------------------------------------------------------

demo

base.html

-------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mypager 基本使用方法</title>
<script type="text/javascript" src="common/MyPager.js"></script>
<link href="common/MyPager.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form>
<script type="text/javascript">
new MyPager(15,10,1).init();

</script>
</form>

<div>
<h3>我的博客</h3>
<hr />
<a href="http://blog.csdn.net/weirhp">http://blog.csdn.net/weirhp</a><br />
<a href="http://hi.baidu.com/weirhp">http://hi.baidu.com/weirhp</a>
</div>
</body>
</html>