js实现的分页组件简单可以扩展

最新推荐文章于 2024-04-20 22:10:42 发布

hama_2005

最新推荐文章于 2024-04-20 22:10:42 发布

阅读量815

点赞数

文章标签：扩展 function callback div html

本文链接：https://blog.csdn.net/hama_2005/article/details/2879891

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
/**
* 功能描述:客户端分页组件
* @author hama
* @version 2008-9-4 v1.0
* @param divID      字符串类型要显示分页div名称可以支持','分割的多个名称
* @param totolCount 数字类型总记录数
* @param style 数字类型
  Page.PAGENUMBER_PAGESIZE=1;
  Page.MIN_MAX=2;
1. style==Page.PAGENUMBER_PAGESIZE
  @callBack 回调函数对象   methodName(pageNumber,pageSize);
  @param1   pageNumber 页码   从1开始的数据可以为空默认为1
  @param2   pageSize    每页行数可以为空默认为8
   2. style==Page.MIN_MAX
  @callBack 回调函数对象   methodName(minItem,maxItem);
  @param1   minItem 从1开始包含1
  @param2   maxItem 不包含maxItem
其他的样式类型可自己扩展
*/

function Page(divID,totolCount,callBack,style,param1,param2){

      this.pageDivObjArray=new Array();
      var divIdArray =divID.split(",");
   for(var index=0;index<divIdArray.length;index++){
    this.pageDivObjArray[index] = document.getElementById(divIdArray[index]); //分页系统容器
   }

this.count = parseInt(totolCount); //总记录数

this.callBackName=divID+"_CB"
Page[this.callBackName] =callBack; //回调函数

this.pageSize = 8; //每页记录数

     this.maxPage=1;   //最大页数
       //this.maxPage=Math.ceil(this.count/this.pageSize);//总页数

this.currentPage = 1 ;//当前页 [1-n)
// if(actionPage && actionPage >0) this.currentPage=parseInt(actionPage);

this.innerHTML="" //div中的innerHTML

     switch(style){
case Page.PAGENUMBER_PAGESIZE:
    if(param2 && param2 >0) this.pageSize=parseInt(param2);
       this.initPageNubmer(param1,this.pageSize);
    this.initDivPageNubmer();
    break;
case Page.MIN_MAX:
       this.initPageMax(param1,param2);
    this.initDivMax();
    break;
default:
      alert("创建js分页样式参数错误style:"+style);
   return;
}

this.showPage();

}
Page.PAGENUMBER_PAGESIZE=1;
Page.MIN_MAX=2;
Page.prototype.trim=function(src){
var pattern=/^/s*|/s*$/g;
return src.replace(pattern,"");
}
Page.prototype.initPageNubmer =function (actionPage,pageSizeP){

this.maxPage=Math.ceil(this.count/this.pageSize);//总页数

if(actionPage && actionPage >0) this.currentPage=parseInt(actionPage);//当前页

}
Page.prototype.initPageMax=function(minItem,maxItem){
     if(!maxItem) maxItem=minItem+this.pageSize;

        if(maxItem && minItem) {
    if(maxItem<minItem){
       var temp=maxItem;
     maxItem=minItem;
     minItem=temp;
    }
       if(minItem<1) minItem=1;
       if((maxItem-minItem)>0)
       this.pageSize =maxItem-minItem; //每页记录数
   this.maxPage=Math.ceil(this.count/this.pageSize);//总页数

if(maxItem >1) this.currentPage=Math.floor((maxItem-1)/this.pageSize);
}
}
Page.prototype.initDivPageNubmer = function(){
var hrefCount=5; //显示的连接数刚开始我对这个变量是当作类变量处理了后来发现这个变量只和显示相关就把它放到这里了

var temp = this.currentPage - this.currentPage % hrefCount+1;

if((this.currentPage % hrefCount)==0)
temp=temp-2; //显示本身和上一页

var maxItem=this.currentPage*this.pageSize+1;

</script>
</HEAD>
<BODY>
<div id="dd" ></div>
   <div id="ddd" ></div>
<div id="pageMax"></div>
</BODY>
<script>

function ff(pageNubmer,pageSize){
    alert("pageNubmer="+pageNubmer+":pageSize="+pageSize);
      //如果刷新页面下班这句调用为非必须
pageNumObj.initPageNubmer(pageNubmer,pageSize);
pageNumObj.initDivPageNubmer();
     pageNumObj.showPage();
}

   function fff(minItem,maxItem){
      alert("minItem="+minItem+"maxItem="+maxItem);
   //如果刷新页面下班这句调用为非必须
   pageMaxObj.initPageMax(minItem,maxItem);
   pageMaxObj.initDivMax();
   pageMaxObj.showPage();
}
var pageNumObj= new Page("dd,ddd",200,ff,1,1,10);
var pageMaxObj= new Page("pageMax",2000,fff,2,1,11);
</script>
</HTML>

hama_2005

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现的分页组件简单可以扩展

New Document /** * 功能描述:客户端分页组件 * @author hama * @version 2008-9-4 v1.0 * @param divID 字符串类型要显示分页div名称可以支持,分割的多个名称 * @param totolCount 数字类型总记录数 * @param style 数字类型 Page.PAGENUMBER_PA
复制链接

扫一扫