pagectrl.js

一个实现将从服务器取到一批数据后,按设定的值分页显示的程序

/**
 * 分页控制条
 * 作者　　:Liangwl
 * 版本　　:1.8
 * 修改历史:
 * 　　　　2005-07-12:增加页数分组显示 By Liangwl.
 * 　　　　2005-07-12:增加总记录数及当前页记录范围显示 By Liangwl.
 * 　　　　2005-07-12:修正当总记录数为 0 时当前页记录范围显示为 1-0 的错误 By Liangwl.
 * 　　　　2005-07-12:修正当URL没有查询字符串(location.search)时的错误 By Liangwl.
 * 　　　　2005-07-12:增加以POST方式翻页的功能 By Liangwl.
 * 　　　　2005-07-21:允许设置每页记录数及每组页数 By Liangwl.
 * 调用方法:
 *    PageCtrl.genPageCtrl(document.all('pageCtrlBar'),2100);
 */
PageCtrl = {
  /**
   * 每页显示的记录数
   */
  PageRowCount : 20,

  /**
   * 每组显示的页数(页数过多时分组显示)
   */
  GroupPageCount : 15,

  /**
   * 翻页的方式
   * 1.GET:直接在URL后加上&start=xxx.
   * 2.POST:在指定的FORM中增加名为start的隐藏域然后提交FORM.
   */
  SubmitMode : "GET",

  /**
   * 使用 POST 方式翻页时要用的 Form,由外部指定.
   */
  Form4Post : null,

  /**
   * 生成页号控制;
   * @param div 容器,可以是td,div,span
   * @param total 总记录数.
   */
  genPageCtrl : function(div,total){
    //总页数
    var pageCount = Math.ceil(total/this.PageRowCount);
    var query = this.getQueryValue(location.search,"start");
    //当前页数
    var current = Math.ceil(null!=query?(query/this.PageRowCount)+1:1);
    //当前组内最小页数
    var minPageInGroup = Math.floor(current/this.GroupPageCount)*this.GroupPageCount;
    minPageInGroup=(minPageInGroup!=current?minPageInGroup:minPageInGroup-this.GroupPageCount)+1;
    //当前组内最大页数
    var maxPageInGroup = Math.ceil(current/this.GroupPageCount)*this.GroupPageCount;
    if (maxPageInGroup<=minPageInGroup)maxPageInGroup+=this.GroupPageCount;
    maxPageInGroup = Math.min(maxPageInGroup,pageCount);

    //显示总记录数及当前页显示的记录范围
    var temp = "共&nbsp<font color='blue'>"+total+"</font>&nbsp条记录&nbsp";
    if(total>0){
      temp += "本页显示第&nbsp<font color='blue'>"+((current-1)*this.PageRowCount+1);
      temp += "</font>-<font color='blue'>"+Math.min(current*this.PageRowCount,total);
      temp+="</font>&nbsp条&nbsp";
    }

    //显示 "上一页"
    temp+=(current==1)?"":"<a href='javascript:PageCtrl.goTo("+(current-1)+")'>上一页</a>&nbsp";

    //显示 "前一组"
    if(Math.floor(minPageInGroup/this.GroupPageCount)>0){
      temp+="<a href='javascript:PageCtrl.goTo(";
      temp+=minPageInGroup-1;
      temp+=")' title='前一组'>&lt;&lt;</a>&nbsp";
    }

    //显示当前分组内的页
    for(var i=minPageInGroup;i<=maxPageInGroup;i++){
      temp+=(i!=current?"<a href='javascript:PageCtrl.goTo("+i+")'>"+i+"</a>":"<font color='red'>"+i+"</font>");
      temp+=((i<maxPageInGroup)?",":"");
    }

    //显示 "后一组"
    if(maxPageInGroup+1<pageCount){
      temp+="&nbsp<a href='javascript:PageCtrl.goTo(";
      temp+=maxPageInGroup+1;
      temp+=")' title='后一组'>&gt;&gt;</a>";
    }
    //显示 "下一页"
    temp+=(current<pageCount)?"&nbsp<a href='javascript:PageCtrl.goTo("+(current+1)+")'>下一页</a>":"&nbsp&nbsp";

    //显示到指定的容器
    if(div&&div.tagName&&("TD"==div.tagName||"DIV"==div.tagName||"SPAN"==div.tagName)){
      div.innerHTML=temp;
    }else{
      var err = "PageCtrl 错误:\n\n不正确的容器类型: \"";
      err += (div&&div.tagName?div.tagName:div);
      err += "\"!\n\n必须是 TD, DIV 或 SPAN.";
      alert(err);
    }
  },

  /**
   * 转到某一页;
   * @param page 要转到的页号
   */
  goTo : function(page){
    var nextStart = (page-1)*this.PageRowCount;
    var url = location.protocol+"//"+location.host+location.pathname;
    var search = location.search;
    if(search==null||search==""){
      //url+="?start="+nextStart;
      search = "?start="+nextStart;
    }else{
      var query = this.getQuery(search,"start");
      search = (query==null?search+"&start="+nextStart:search.replace(query,"&start="+nextStart));
      //url+=(query==null?search+"&start="+nextStart:search.replace(query,"&start="+nextStart));
    }
    var pc = this.getQuery(search,"pagecount");
    search = (pc==null?search+"&pagecount="+this.PageRowCount:search.replace(pc,"&pagecount="+this.PageRowCount));
    url+= search;
    alert(url);
    if("GET"==this.SubmitMode||null==this.Form4Post){
      location.href=url;
    }else{
      /*
      if(!this.Form4Post.start){
        var start = document.createElement("<input type='hidden' name='start'>");
        start.value= nextStart;
        this.Form4Post.appendChild(start);
      }else{
        this.Form4Post.start.value=nextStart;
      }
      */
      this.Form4Post.action=url;
      this.Form4Post.submit();
    }
  },

  /**
   * 设置翻页的方式
   * @param mode GET或者POST.
   */
  setSubmitMode : function(mode){
    this.SubmitMode = (null!=mode&&mode.constructor&&mode.constructor==String&&("GET"==mode||"POST"==mode))?mode:"GET";
  },

  /**
   * 设置 POST 方式翻页时使用的Form.
   * @param form 正确的Form表单
   */
  setForm4Post : function(form){
    this.Form4Post = (null!=form&&form.tagName&&form.tagName=="FORM")?form:null;
  },

  /**
   * 设置每页显示的记录数
   * @param pageRowCount 每页显示记录数
   */
  setPageRowCount : function(pageRowCount){
    if(pageRowCount&&pageRowCount>0)this.PageRowCount = pageRowCount;
  },

  /**
   * 设置每组显示的页数
   * @param groupPageCount 每组显示的页数
   */
  setGroupPageCount : function(groupPageCount){
    if(groupPageCount&&groupPageCount>0)this.GroupPageCount = groupPageCount;
  },

  /**
   * 返回 &name=value;
   * @param search URL的?及?以后的部分(location.search)
   * @param name &name=value中的name
   */
  getQuery : function(search,name)    {
   // var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)");
    var r = search.substr(1).match(reg);
    if (r!=null) return unescape(r[0]); return null;
  },

  /**
   * 返回 value;
   * @param search URL的?及?以后的部分(location.search)
   * @param name &name=value中的name
   */
  getQueryValue : function(search,name){
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = search.substr(1).match(reg);
    if (r!=null) return unescape(r[2]); return null;
  }
};//The end :~