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 οnclick=/"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 οnclick=/"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 οnclick=/"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 οnclick=/"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>