posts - 7,  comments - 58,  trackbacks - 0
用javascript实现较为通用的客户端分页组件
1、测试页面
<html>
<head>
 <script src="pageSystem.js"></script>
 <script>
   var psys;
   window.onload = function() {
    psys = new PageSystem(1120, "pageDiv", 10, showMsg); //总记录数, 分页系统容器，每组10页,回调
    psys.init();
  }
 
  function showMsg(currentPage, pageSize) {
    //回调方法自定义，两个参数，第一个为当前页，第二个为每页记录数
    /****************将currentPage和pageSize请求数据更新列表,最好使用ajax技术******************/
    alert("请求数据要的相应参数>> currentPage: "+ currentPage + " pageSize: " + pageSize);
  }
  
   /*****如果要更新分页系统请如下操作******/
    //psys.update(count); //@count 为记录总数
    function updatePageSys() {
    
     psys.update(150); //@count 为记录总数
   }
  </script>
  <style>
    #pageDiv{
      font-size:13px;
    }
  </style>
</head>
<body>
  <div id="pageDiv">
  </div>
  <br/><br/>
  <a href="#" onclick="updatePageSys();"/>更新分页系统</a>
</body>
</html>

2、pageSystem.js
function PageSystem(count, divID, grountCount, callBack) {
     this.totolCount = count; //总记录数
     this.initMaxPage = grountCount? grountCount: 5;  //显示页数，如 1 2 3 4 5
     this.pageSize = 10;  //每页记录数
     this.currentMax = 0; //当前显示的最大页码, 如 1 2 3 4 5; 5为最大页码
     this.currentMin = 0; //当前显示的最小页码, 如 11 12 13 14 15; 11为最小页码
     this.homePage = 0; //首页
     this.endPage = 0; //未页
     this.currentPage = 0; //当前页
     this.currentActiveSpan; //当前活动a容器
     this.pageDivObj = document.getElementById(divID); //分页系统容器
     this.pages = 0; //总页数，计算得到
     //this._url = _url; //提交URL
     this.callBack = callBack; //回调
     var that = this; //指针的引用
    
   
     this.init = function() {
        this.pages = parseInt(this.totolCount / this.pageSize); //获得总共有几页
        this.pages = this.totolCount % this.pageSize == 0? this.pages: this.pages+1;
        this.createHomePage();
        this.createPrePage();
        var n = 1;
        while(n <= this.pages) {
          if(n > this.initMaxPage){
             break; //到达最大显示数
          }
          var _span = document.createElement("SPAN");
          _span.style.cssText = "margin-left:10px";
          if(n == 1) { //初始化时第一页为活动页
            _span.innerText = n;
            this.currentActiveSpan = _span;
          }else{
             var _a = document.createElement("A");
             _a.href = "#";
            _a.onclick = this.reView;
            _a.innerText = n;
            _span.appendChild(_a);
          }
          this.pageDivObj.appendChild(_span);
          n++;
        }
        if(this.pages != 0) {
          this.currentMax = n - 1; //当前组最大页码 1 2 3 4 5值为5
          this.currentMin = 1; //当前最小页码 1 2 3 4 5 值为1
          this.homePage = 1; //首页
          this.endPage = this.pages; //未页
          this.currentPage = 1; //当前页
        }
        //alert(this.currentMax);
        //alert(this.currentMin);
        this.createNextPage();
        this.createEndPage();
      
      
      
    };
    this.query = function() {
      var curPage = that.currentPage; //当前页
      var pageSize = that.pageSize;
      if(that.callBack) that.callBack(curPage, pageSize);
         
    };
    this.reView = function() {
     //重新渲染UI
       that.reViewActivePage();
       that.query();
    };
    this.reViewActivePage = function() {
      //重新渲染当前页视图
      var actA = event.srcElement; //当前被点击的 a对象
      var ap = actA.parentNode; //获得当前a容器span对象
      //还原当前页视图
       var _a = document.createElement("A");
        _a.href = "#";
        _a.onclick = this.reView;
        _a.innerText = that.currentActiveSpan.innerText;
        that.currentActiveSpan.innerText = "";
        that.currentActiveSpan.appendChild(_a);
       //渲染新的当前页视图
       that.currentActiveSpan = ap; //切换当前活动页容器
       var curPage = parseInt(actA.innerText);
       that.currentActiveSpan.removeChild(actA);
       that.currentActiveSpan.innerText = curPage;
       this.currentPage = curPage; //更改当前页码
       if(!that.toNextGroup()) that.toPreGroup();
    };
    this.toNextGroup = function() {
       //重新渲染显示页下一组 1 2 3 4 5 --> 5 6 7 8 9
       if(that.currentPage == that.currentMax) {//点击的页码为当前组最大页码，当go 下一组
         if(that.currentPage != that.endPage) { //如果点了未页当然不会再有下一组啦！
            that.pageDivObj.innerHTML = ""; //@1
            var pageCode = parseInt(that.currentPage) + 1; //显示页码
            var n = 2; //当前活动页不重创
            this.createHomePage();
            this.createPrePage();
            that.currentActiveSpan.innerText = that.currentPage;
            that.pageDivObj.appendChild(that.currentActiveSpan); //将当前活动页回放,请看@1
            while(pageCode <= that.pages) {
            if(n > that.initMaxPage){
               break; //到达最大显示数
            }
            var _span = document.createElement("SPAN");
            _span.style.cssText = "margin-left:10px";
            var _a = document.createElement("A");
             _a.href = "#";
            _a.onclick = that.reView;
            _a.innerText = pageCode;
            _span.appendChild(_a);
            that.pageDivObj.appendChild(_span);
            pageCode++;
            n++;
          }
          that.currentMax = pageCode - 1;
          that.currentMin = that.currentPage;
         // alert("currentMax: " + that.currentMax);
         // alert("currentMin: " + that.currentMin);
          this.createNextPage();
          that.createEndPage();
          return true;
         }//end if
       }//end if
       return false;
    };
    this.toPreGroup = function() { //
      //重新渲染显示页上一组 5 6 7 8 9 -->1 2 3 4 5
      if(that.currentPage == that.currentMin) { //点了组中最小页码
        if(that.currentPage != 1) {
           that.pageDivObj.innerHTML = ""; //@2
            var pageCode = parseInt(that.currentPage) - (that.initMaxPage -1); //显示页码
            var n = 2; //当前活动页不重创
            this.createHomePage();
            this.createPrePage();
            while(true) {
            if(n > that.initMaxPage){
               break; //到达最大显示数
            }
            var _span = document.createElement("SPAN");
            _span.style.cssText = "margin-left:10px";
            var _a = document.createElement("A");
             _a.href = "#";
            _a.onclick = that.reView;
            _a.innerText = pageCode++;
            _span.appendChild(_a);
            that.pageDivObj.appendChild(_span);
            n++;
          }
          that.currentMax = that.currentPage;
          that.currentMin = pageCode - (that.initMaxPage -1);
          //alert("currentMax: " + that.currentMax);
         // alert("currentMin" + that.currentMin);
          that.currentActiveSpan.innerText = that.currentPage;
            that.pageDivObj.appendChild(that.currentActiveSpan); //将当前活动页回放,请看@2
            that.createNextPage();
            that.createEndPage();
        }//end if
      }//end if
    };
     this.toHomePage = function(){
       //去到首页
       if(that.pages == 0) return;
       if(that.currentPage != 1) {//切组
         that.pageDivObj.innerHTML = "";
         that.init();
       }//end if
       that.currentPage = 1;
       that.currentMin = 1;
       that.currentMax = that.initMaxPage;
       that.query();
     };
     this.toEndPage = function() {
       //去到未页
        if(that.pages == 0 ||that.currentPage == that.pages) return;
        if(true) {//切组条件修改，此条件作废,临时设为true
        that.pageDivObj.innerHTML = "";
        that.createHomePage();
        that.createPrePage();
        var pageCode = 1;
     var n = 1;
      while(pageCode <= that.pages) {
        if(n > that.initMaxPage-1){
          n = 1;
        }
        n++;
        pageCode++;
      }
     
      pageCode = that.pages - (n-2);
      for(var j = 1; j < n; j++) {
         var _span = document.createElement("SPAN");
       _span.style.cssText = "margin-left:10px";
       if(pageCode == that.pages) { //初始化时第一页为活动页
        _span.innerText = pageCode;
        that.currentActiveSpan = _span;
       }else{
         var _a = document.createElement("A");
         _a.href = "#";
         _a.onclick = that.reView;
         _a.innerText = pageCode;
         _span.appendChild(_a);
         pageCode++;
       }
       that.pageDivObj.appendChild(_span);
      }
      
         that.createNextPage();
          that.createEndPage();
       }//end if
       that.currentPage = that.pages;
       that.currentMin = that.pages - (n-2);
       that.currentMax = that.pages;
      // alert("currentMin: " + that.currentMin);
       //alert("currentMax: " + that.currentMax);
      // alert("pages: " + that.pages);
       that.query();
     };
    
     this.next = function() {
       //下一页
     };
     this.pre = function() {
       //上一页
     };
     this.update = function(count) {
       //更新分页系统
       this.totolCount = count;
       that.pageDivObj.innerHTML = "";
       this.init();
     };
     this.createPrePage = function() {
       return;
       var _span = document.createElement("SPAN");
       _span.style.cssText = "margin-left:16px";
       var _a = document.createElement("A");
       _a.href = "#";
       _a.onclick = this.pre;
       _a.innerText = "上一页";
       _span.appendChild(_a);
       this.pageDivObj.appendChild(_span);
     };
     this.createNextPage = function() {
       return;
       var _span = document.createElement("SPAN");
       _span.style.cssText = "margin-left:16px";
       var _a = document.createElement("A");
       _a.href = "#";
       _a.onclick = this.next;
       _a.innerText = "下一页";
       _span.appendChild(_a);
       this.pageDivObj.appendChild(_span);
     };
     this.createHomePage = function() {
       var homeSpan = document.createElement("SPAN");
       var _a = document.createElement("A");
       _a.href = "#";
       _a.onclick = this.toHomePage;
       _a.innerText = "首页";
       homeSpan.appendChild(_a);
       this.pageDivObj.appendChild(homeSpan);
     };
     this.createEndPage = function() {
       var _span = document.createElement("SPAN");
       _span.style.cssText = "margin-left:16px";
       var _a = document.createElement("A");
       _a.href = "#";
       _a.onclick = this.toEndPage;
       _a.innerText = "未页(" + this.pages +")";
       _span.appendChild(_a);
       this.pageDivObj.appendChild(_span);
     }
   }

3、效果图
 
如需转载，请注明原文出处！谢谢合作。
posted on 2008-05-04 22:54 Sonny Li 阅读(3494) 评论(23)  编辑  收藏 所属分类: javascript编程语言

FeedBack:
# re: 用javascript实现较为通用的客户端分页组件
2008-05-05 00:59 | 令狐虫
不错
我收藏了！  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2008-05-05 09:44 | J@mes
+fav  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2008-05-05 09:46 | BeanSoft
赞一个。  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2008-05-05 09:55 | icecity
是“末页”，不是“未页”:)  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2008-05-05 10:40 | 王战锋
我觉得非常棒！感谢你的分享！  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2008-05-05 11:25 | tttom
能不能改成上一页，下一页那种？？谢谢了！！  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2008-05-05 11:57 | tttom
博主，麻烦您给改改！谢谢了！  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2008-05-05 12:00 | tttom
刚看了博主的照片，哇，还是一个大帅哥哦！
  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2008-05-05 15:17 | Happy漫步者
看的出这个javascript水平还不赖 学习了~~ 顶个
  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2008-05-05 20:43 | 无羽苍鹰
@tttom
由于工作需要，此分页组件是临时做的测试版（没时间弄，最近天天加班，等稍有空后将与改进）
谢谢。  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2008-05-05 20:45 | 无羽苍鹰
@icecity
呵呵。。。谢谢。。。^_^  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2008-05-05 22:00 | jacky-q
firefox下无法显示....唔,有空看看改改.
写得还是很不错的.  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件[未登录]
2008-05-06 14:23 | Paul Lin
虽然我看不懂，不过还是要顶你一下，呵呵  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2008-05-06 20:12 | 速溶人生
顶一个，最近在看这个！  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2008-05-08 20:40 | 王能
看不懂,还要顶
http://www.tondou.cn/ 最新电影网  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2008-05-09 22:32 | 超
我前公司的牛人。。哈哈。。顶。。  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2008-05-12 23:26 | wen
看不懂,也顶一下,是个好东西!!拿用用!!  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2008-05-28 14:19 | 懒人
很不错的东西  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2008-07-30 11:38 | 杜东辉
杜东辉，到此一游，看不懂，老大,顶  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2008-12-06 09:15 | 海！
希望楼主能改用jquery 把它写成一个组件，让后共享，大家就知道你的杰作了  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2009-02-16 12:07 | eva
无法运行啊！  回复  更多评论
  
# 有个最新版的代码，分享给大家，也是几年前写的东西了
2011-11-15 00:57 | Sonny Li
function $el(el) {
return document.createElement(el);
}
function $ap(p, n) {
p = p || document;
p.appendChild(n);
}
function $id(_id) {
return document.getElementById(_id);
}
(function(){
var _style = $el("link");
_style.href = "jpage.css";
_style.rel = "stylesheet";
_style.type = "text/css";
document.getElementsByTagName("HEAD").item(0).appendChild(_style);

})();

/**
* fun: 实现ajax分页效果
* 参数说明：c 分页控件显示的容器ID，一般用DIV的ID
* recordCount: 总记录数
* service 请求分页数据的js方法指针，分页控件负责回调, 原型 function fun(curPage, pageSize) {....}
*/
function JPage(c, recordCount, service, pageSize, group) {
this._c = $id(c);
this.pageSize = pageSize || 10; //一页几条
this.pageCount = (recordCount % this.pageSize) == 0? (recordCount / this.pageSize): parseInt((recordCount / this.pageSize) + 1); //总页数
this.service = service; //回调方法
this.group = group || 11; //一组几页
this.pageData = new Array(this.group); //当前要显示的页对象索引缓存区
this.curPage = 1; // 初始化为第一页为当前页
var that = this;
this.pageEvt = function(thePg) {
this.curPage = thePg;
this.service(this.curPage, this.pageSize);
this.render();
};
this.render = function() {
this._c.innerHTML = "";
if(recordCount == 0) return;
this.createFirstPage();
this.readData(); //准备分页索引
this.createPrePage();
this.createPages();
this.createNextPage();
this.createEndPage();
};
this.createEndPage = function() {
var _span = $el("span");
var epg = new FEPg(this, this.pageCount, "EndCssClass"); //最后一页
$ap(_span, epg.getView());
$ap(this._c, _span);
};
this.createFirstPage = function() {
var _span = $el("span");
var fpg = new FEPg(this, 1, "FirstCssClass"); //首页
$ap(_span, fpg.getView());
$ap(this._c, _span);
};
this.createPages = function() {
for(var n = 0; n < this.group; n++) {
if(this.pageData[n] == -2) break; //
var _span = $el("span");
var _page = new Pg(this, this.pageData[n]);
$ap(_span, _page.getView());
$ap(this._c, _span);
}
};
this.createPrePage = function() {
var preSpan = $el("span");
var prePage = new PrePg(this, this.curPage - 1);
$ap(preSpan, prePage.getView());
$ap(this._c, preSpan);
};
this.createNextPage = function() {
var nextSpan = $el("span");
var nextPage = new NextPg(this, this.curPage + 1);
$ap(nextSpan, nextPage.getView());
$ap(this._c, nextSpan);
};
this.readData = function() {
for(var i = 0; i < this.group; i++) this.pageData[i] = -2;
var firstIndex = (this.pageCount <= this.group || this.curPage <= parseInt(this.group / 2))? 1: this.curPage - parseInt(this.group / 2);
if(firstIndex > this.pageCount) return;
this.pageData[0] = firstIndex;
for(var n = 1; n < this.group; n++) {
if(this.pageData[n-1] >= this.pageCount) break;
this.pageData[n] = this.pageData[n-1] + 1;
}
};
this.render();
}

/**
* fun: 页模型基类
* 参数说明：owner分页对象，the 当前页索引， pre 上一页索引， _next 下一页索引， vtxt 显示文本（用于“上一页”及“下一页”）
*/
function Pg(owner, the, vtxt) {
this._owner = owner;
this._self = the;
this._vtxt = vtxt || the;
this._view = $el("a");
this._view.innerHTML = this._vtxt;
var that = this;
this.getView = function() {
if(this._self == this._owner.curPage) {this._view.className = "activePage"; return this._view; }
this._view.href = "javascript:;";
this._view.onclick = function() {
that._owner.pageEvt(that._self); //回传点中的页对象页索引
}
return this._view;
};

this.getMe = function() {
return this._self;
};

}

/**
* fun: Pg子类"上一页“类模型
*/
function PrePg(owner, the, vtxt) {
this._super = Pg;
this._super(owner, the, " "); //当前页为第一页时，the为0
var that = this;

this.getView = function() {
if(this._self == 0) { this._view.className = "NoView"; return this._view; } //如果当前页为第一页，不创建上一页对象视图
this._view.href = "javascript:;";
this._view.onclick = function() {
that._owner.pageEvt(that._self); //回传点中的页对象页索引
}
this._view.className = "PreCssClass";
return this._view;
};

}

/**
* fun: Pg子类"下一页”类模型
*/
function NextPg(owner, the, vtxt) {
this._super = Pg;
this._super(owner, the, " ");
var that = this;

this.getView = function() {
if(this._self == this._owner.pageCount + 1) { this._view.className = "NoView"; return this._view; } //如果当前页为第一页，不创建上一页对象视图
this._view.href = "javascript:;";
this._view.onclick = function() {
that._owner.pageEvt(that._self); //回传点中的页对象页索引
}
this._view.className = "NextCssClass";
return this._view;
};
}

/**
* fun: 第一页及最后一页类模型
*/
function FEPg(owner, the, _class) {
this._super = Pg;
this._super(owner, the, " ");
var that = this;
this.getView = function() {
if(this._owner.pageCount == 0) { return this._view; } //如果当前页为第一页，不创建上一页对象视图
this._view.href = "javascript:;";
this._view.onclick = function() {
that._owner.pageEvt(that._self); //回传点中的页对象页索引
}
this._view.className = _class;
return this._view;
}
}  回复  更多评论
  
# re: 用javascript实现较为通用的客户端分页组件
2014-12-18 15:24 | yangxd

只有注册用户登录后才能发表评论。
网站导航:
 
Copyright ©2024 Sonny Li Powered By: 博客园 模板提供：沪江博客
<2011年11月>
日一二三四五六
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

常用链接

留言簿(3)

随笔分类

随笔档案

文章分类

相册

收藏夹

博客好友

搜索

  •  

最新评论

阅读排行榜

评论排行榜