TsoLong Blog

http://www.tsolong.com/

导航

javascript+Ajax分页条控件

/****************************************
Description:
  Ajax分页条控件
  1.可通过new来创建多个分页条
Example:
  new pageBar({
    func: function(pageIndex){
      alert(pageIndex);
    },
    recordTotal: 100,
    pageSize: 10,
    el: $("ttt")
  })
Create Date: 2009-02-05
****************************************/
function pageBar(par){
  //如果总记录参数未指定或小于等于0,则不创建分页条控件
  if (!par.func || !par.recordTotal || par.recordTotal <= 0) 
    return;
  
  //类的参数
  this.func = function(){}; //更新数据方法接口
  this.recordTotal = 0; //记录总数
  this.pageSize = 10; //每页记录条数
  this.pageTotal = 1; //页码总数
  this.pageIndex = 1; //当前页码
  this.el = null; //分页条附加到此元素之后
  
  //给参数赋值
  for (var p in par) {
    this[p] = par[p];
  }
  
  //调用接品函数,绑定第一页的数据
  this.func(this.pageIndex);
  //计算总页数
  this.pageTotal = Math.ceil(this.recordTotal / this.pageSize);
  
  this.create();
}
pageBar.prototype = {
  //创建分页条并显示
  create: function(){
    if (this.pageBarObj)
      this.pageBarObj.parentNode.removeChild(this.pageBarObj);
    
    //分页条
    var pageBarObj = document.createElement("div");
    this.pageBarObj = pageBarObj
    setAttr(pageBarObj, "class", "pageBar");
    
    //分页信息
    var pageInfo = document.createElement("span");
    pageInfo.innerHTML = " 共 " + this.recordTotal + " 条数据";
    pageBarObj.appendChild(pageInfo);
    pageInfo = document.createElement("span");
    pageInfo.innerHTML = " 每页 " + this.pageSize + " 条";
    pageBarObj.appendChild(pageInfo);
    pageInfo = document.createElement("span");
    pageInfo.innerHTML = "共 " + this.pageTotal + " 页";
    pageBarObj.appendChild(pageInfo);
    
    //首页
    var firstPage = document.createElement("a");
    firstPage.innerHTML = "首页";
    setAttr(firstPage, "title", "首页");
    pageBarObj.appendChild(firstPage);
    
    //上一页
    var prevPage = document.createElement("a");
    prevPage.innerHTML = "上一页";
    setAttr(prevPage, "title", "上一页");
    pageBarObj.appendChild(prevPage);
    
    //数字页码
    for (var i = 1; i <= this.pageTotal; i++) {
      var num = document.createElement("a");
      if (i == this.pageIndex) {
        setAttr(num, "class", "currentPage");
        setAttr(num, "title", "你正在浏览本页");
      }
      else {
        setAttr(num, "title", "第" + i + "页");
        var oThis = this;
        (function(){
          var tmp = i;
          num.onclick = function(){
            oThis.changePage(tmp);
          }
        })()
      }
      num.innerHTML = i;
      pageBarObj.appendChild(num);
    }
    
    //下一页
    var nextPage = document.createElement("a");
    nextPage.innerHTML = "下一页";
    setAttr(nextPage, "title", "下一页");
    pageBarObj.appendChild(nextPage);
    
    //末页
    var lastPage = document.createElement("a");
    lastPage.innerHTML = "末页";
    setAttr(lastPage, "title", "末页");
    pageBarObj.appendChild(lastPage);
    
    //转到指定的页码输入框
    var goPageTxt = document.createElement("input");
    setAttr(goPageTxt, "class", "txt");
    setAttr(goPageTxt, "value", this.pageIndex);
    pageBarObj.appendChild(goPageTxt);
    
    //分页条附加到el元素之后
    this.el.parentNode.insertBefore(pageBarObj, this.el.nextSibling);
    
    //设置 (首页 上一页 下一页 尾页) 是否可用
    switch (this.pageIndex) {
      case 1:
        this.bindEvent(firstPage, false);
        this.bindEvent(prevPage, false);
        setAttr(firstPage, "title", "本页已经是首页");
        setAttr(prevPage, "title", "本页已经是首页");
        if (this.pageTotal > 1) {
          this.bindEvent(nextPage, true, this.pageIndex + 1);
          this.bindEvent(lastPage, true, this.pageTotal);
          this.goPage(goPageTxt, true);
        }
        else {
          this.bindEvent(nextPage, false);
          this.bindEvent(lastPage, false);
          setAttr(nextPage, "title", "本页已经是末页");
          setAttr(lastPage, "title", "本页已经是末页");
          this.goPage(goPageTxt, false);
        }
        break;
      case this.pageTotal:
        this.bindEvent(firstPage, true, 1);
        this.bindEvent(prevPage, true, this.pageIndex - 1);
        this.bindEvent(nextPage, false);
        this.bindEvent(lastPage, false);
        setAttr(nextPage, "title", "本页已经是末页");
        setAttr(lastPage, "title", "本页已经是末页");
        this.goPage(goPageTxt, true);
        break;
      default:
        this.bindEvent(firstPage, true, 1);
        this.bindEvent(prevPage, true, this.pageIndex - 1);
        this.bindEvent(nextPage, true, this.pageIndex + 1);
        this.bindEvent(lastPage, true, this.pageTotal);
        this.goPage(goPageTxt, true);
        break;
    }
  },
  //设置 (首页 上一页 下一页 尾页) 事件
  bindEvent: function(obj, flag, pageIndex){
    if (flag) {
      removeAttr(obj, "class");
      var oThis = this;
      obj.onclick = function(){
        oThis.changePage(pageIndex);
      };
    }
    else {
      setAttr(obj, "class", "disabled");
      obj.onclick = null;
    }
  },
  //转到指定的页码
  goPage: function(goPageTxt, flag){
    if (flag) {
      var oThis = this;
      goPageTxt.onkeyup = function(e){
        if (this.value > 0 && this.value <= oThis.pageTotal) {
          if (getKey(getEvent(e)) == 13) 
            oThis.changePage(this.value);
        }
        else {
          this.value = "";
        }
      }
      setAttr(goPageTxt, "title", "输入要转到的页码(1-" + this.pageTotal + ")");
    }
    else {
      setAttr(goPageTxt, "disabled", "disabled");
      setAttr(goPageTxt, "title", "当前输入框不可用");
    }
  },
  //翻页处理
  changePage: function(pageIndex){
    pageIndex = parseInt(pageIndex);
    if (pageIndex > 0 && pageIndex <= this.pageTotal) {
      this.pageIndex = pageIndex;
      this.func(pageIndex);
      this.create();
    }
  }
}
/*
By:TsoLong
http://www.tsolong.com/
tsolong@126.com
*/

<< C# XML相关通用功能sql2000 分页存储过程同时返回记录总数 >>

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最近发表

Copyright © 2008-2010 TsoLong Blog All Rights Reserved.   沪ICP备08106933号