zhanggongzi

var eventDo = {
addHandler:function(ele,type,fn){
if(ele.addEventListener){
ele.addEventListener(type, fn, false);
}else if(ele.attachEvent){
ele.attachEvent("on"+type, fn);
}else{
ele["on"+type] = fn;
}
},
removeHandler:function(ele,type,fn){
if(ele.removeEventListener){
ele.removeEventListener(type, fn, false);
}else if(ele.detachEvent){
ele.detachEvent("on"+type, fn);
}else{
ele["on"+type] = null;
}
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>page.js</title>
<style type="text/css">
.ui-pagination .jump,.ui-pagination .page,.ui-pagination .pagesize,.ui-pagination ul>li {
display: inline-block
}
.ui-pagination {
margin: 10px 0;
padding: 0;
text-align: right;
font-size: 14px;
color: #666;
}
.ui-pagination .pagesize-wrap {
float: left
}
.ui-pagination .pagesize-wrap select {
margin: 5px;
min-width: 50px;
height: 22px;
line-height: 22px;
border: 1px solid #eee;
background-color: #fff;
outline: 0;
}
.ui-pagination .jump,.ui-pagination .pagesize {
margin-left: 20px
}
.ui-pagination ul {
margin: 0;
padding: 0
}
.ui-pagination ul>li {
margin: 0;
padding: 0;
list-style: none
}
.ui-pagination ul>[disabled="true"]>a {
background-color: #ffffff!important;
color: #ccc!important;
cursor: not-allowed;
opacity: .7
}
.ui-pagination ul>li.current a,.ui-pagination ul>li>a:hover {
color: #fff;
background-color: #ff8400
}
.ui-pagination ul>li>a {
display: block;
padding: 5px 10px;
font-size: 14px;
border: 1px solid #eee;
border-radius: 4px;
margin-right: 5px;
color: #666;
text-decoration: none;
}
.ui-pagination .goto-input {
padding: 5px;
line-height: 16px;
border: 1px solid #eee;
margin: 0 5px;
width: 30px;
outline:0
}
.ui-pagination a.go {
padding: 5px 10px;
font-size: 14px;
border: 1px solid #ddd;
background-color: #eee;
margin-left: 10px;
text-decoration: none;
color: #666;
}
.ui-pagination a.go:hover {
background-color: #ff8400;
color: #fff
}
</style>
</head>

<body>
<div id='z-page'></div>
<div id='z-page2'></div>
<div id='z-page3'></div>
<script type="text/javascript">
;(function(window){
function Pagination(obj){
this.el = document.getElementById(obj.el);
if(!this.el) return;
this.current = obj.current || 1;//当前第几页
this.total = obj.total || 1;//后台返回的总条数
this.pageNum = 0;//总共多少页
this.pageSize = obj.pageSize || 10;//每页多少条
this.sizeType = obj.sizeType || [10,20,50,100];
this.type = obj.type || 'normal';
this.onPage = obj.onPage || function(){};
this.isShowSizeOption = obj.isShowSizeOption || false;
this.isShowPrevNext = obj.isShowPrevNext || true;
this.isShowTotal = obj.isShowTotal == null ? true : obj.isShowTotal;
this.isShowJumpPage = obj.isShowJumpPage || true;
this.paginationText = {
prevPageText:obj.paginationText && obj.paginationText.prevPageText || '上一页',
nextPageText:obj.paginationText && obj.paginationText.nextPageText || '下一页',
totalPageText:obj.paginationText && obj.paginationText.totalPageText || '共',
pageText:obj.paginationText && obj.paginationText.pageText || '页',
goText:obj.paginationText && obj.paginationText.goText || '跳至',
goBtnText: obj.paginationText && obj.paginationText.goBtnText || '确定',
selectText:obj.paginationText && obj.paginationText.selectText || '条/页'
}
if(obj.style){
this.style ={
borderStyle:obj.style.borderStyle || 'solid',
borderWidth:obj.style.borderWidth || '1px',
borderColor:obj.style.borderColor || '#ddd',
color:obj.style.color || '#666',
fontSize:obj.style.fontSize || '12px',
currentPageColor:obj.style.currentPageColor || '#FF8400',
currentPageFontColor:obj.style.currentPageFontColor || '#666',
hoverPageColor:obj.style.hoverPageColor || '#FFB800',
hoverPageFontColor:obj.style.hoverPageFontColor || '#FFF'
}
}

    this.init();
  }
  Pagination.prototype = {
    init: function(){
      var self = this;
      self.totalPages();
      self.showPaginationType(self.type);
    },
    totalPages:function(){
      var self = this;
      if(self.total>=0 && self.pageSize > 0){
        pageNum = self.pageNum = Math.ceil(self.total / self.pageSize);
      }
    },
    showPaginationType: function(type){
      var self = this;
      if(type == null) return;
      switch(type+''){
        case 'normal':
        self.normalHtm();
        break;
        case 'simple':
        self.simpleHtm();
        break;
      }
    },
    renderCss:function(){
      var self = this;
      var a = self.el.getElementsByTagName('a');
      if(a && a.length > 0 && self.style){
        for(var i=0,j=a.length; i < j; i++){
          a[i].style.borderStyle = self.style.borderStyle;
          a[i].style.borderWidth = self.style.borderWidth;
          a[i].style.borderColor = self.style.borderColor;
          a[i].style.color = self.style.color;
          a[i].style.fontSize = self.style.fontSize;
        }
      }
      if(self.style){
        if(a && a.length > 0){
          var color = a[0].style.color;
          for(var i=0,j=a.length; i < j; i++){
            a[i].onmouseenter = function(){
              if(this.innerText == self.current || this.textContent == self.current) return;
              this.style.backgroundColor = self.style.hoverPageColor;
              this.style.color = self.style.hoverPageFontColor;
            }
            a[i].onmouseleave = function(){
              if(this.innerText == self.current || this.textContent == self.current) return;
              this.style.backgroundColor = "#FFFFFF";
              this.style.color = color;
            }
          }
        }
      }
    },
    normalHtm:function(){
      var self = this;
      self.remove();
      var $paginationBox = document.createElement('div');
      $paginationBox.className = 'ui-pagination';
      if(self.isShowSizeOption){
        var $pageSize = self.createPageSizeOptions();
        $paginationBox.appendChild($pageSize);
      }
      var $ul = document.createElement('ul');
      $ul.className = 'page';
      if(self.isShowPrevNext){
        var $prevPage = self.createPrevPage();
        $ul.appendChild($prevPage);
      }
      var $li = self.createLi();
      for(var s=0;s<$li.length;s++){
        $ul.appendChild($li[s]);
      }
      if(self.isShowPrevNext){
        var $nextPage = self.createNextPage();
        $ul.appendChild($nextPage);
      }
      $paginationBox.appendChild($ul);
      if(self.isShowTotal){
        var $total = self.createTotalPage();
        $paginationBox.appendChild($total);
      }
      if(self.isShowJumpPage){
        var $jump = self.createJumpPage();
        $paginationBox.appendChild($jump);
      }
      self.el.appendChild($paginationBox);
      self.renderCss();
    },
    simpleHtm: function(){
      var self = this;
      self.remove();
      var $div = document.createElement('div');
      $div.className = 'ui-pagination';
      var $ul = document.createElement('ul');
      $ul.className = 'page';
      if(self.isShowPrevNext){
        var $prevPage = self.createPrevPage();
        $ul.appendChild($prevPage);
      }
      if(self.isShowPrevNext){
        var $nextPage = self.createNextPage();
        $ul.appendChild($nextPage);
      }
      $div.appendChild($ul);
      if(self.isShowTotal){
        var $total = self.createTotalPage();
        $div.appendChild($total);
      }
      self.el.appendChild($div);
  
  self.renderCss();
    },
    remove: function(){
      var div = this.el;
      while(div.hasChildNodes())
      {
        div.removeChild(div.firstChild);
      }
    },
    createPageSizeOptions:function(){
      var self = this;
      var $pageSize = document.createElement('div');
      $pageSize.className = 'pagesize-wrap';
      var select = document.createElement('select');
      select.className = 'pagesize';
      for(var i = 0 ;i < self.sizeType.length;i ++ ) {   
        var option  =  document.createElement("option");   
        var text  =  document.createTextNode(self.sizeType[i]+' '+self.paginationText.selectText);   
        option.appendChild(text);   
        option.value = self.sizeType[i];
        select.appendChild(option);    
      }
      select.onchange = function(){
        var pageSize = this.value;
        self.current = 1;
        self.pageSize = pageSize;
        self.showPaginationType(self.type);
      }
      select.value = self.pageSize;
      $pageSize.appendChild(select);
      return $pageSize;
    },
    createTotalPage: function(){
      var self = this;
      var $total = document.createElement('div');
      var $totalTxt;
      $total.className = 'pagesize';
      if(self.type && self.type == 'normal'){
       $totalTxt = document.createTextNode(self.paginationText.totalPageText + '' + self.pageNum + self.paginationText.pageText);
     }else{
      $totalTxt = document.createTextNode(self.current + '/' + self.pageNum);
    }
    $total.appendChild($totalTxt);
    return $total;
  },
  createJumpPage: function(){
    var self = this;
    var jump = document.createElement('div');
    jump.className = 'jump';
    var jumpTxt1 = document.createTextNode(self.paginationText.goText);
    jump.appendChild(jumpTxt1);
    var jumpInput = document.createElement('input');
    jumpInput.className = 'goto-input';
    jumpInput.type = 'text';
    jumpInput.maxLength = '8';

jumpInput.onkeyup = function(){
   var inpVal = this.value;
   if(!/^\d+$/.test(inpVal)){
    this.value = '';
   }
}
    jump.appendChild(jumpInput);
    var jumpTxt2 = document.createTextNode(self.paginationText.pageText);
    jump.appendChild(jumpTxt2);
    var a = document.createElement('a');
    a.href = 'javascript:void(0);';
    a.className = 'go';
    var aTxt = document.createTextNode(self.paginationText.goBtnText);
    a.onclick = function(){
      var pageNo = this.parentNode.getElementsByTagName('input')[0].value;
  
  if(!/^\d+$/.test(pageNo)) return;
      pageNo = Math.max(1,pageNo);
      pageNo = Math.min(pageNo,self.pageNum);
      self.current = parseInt(pageNo);
      self.onPage(self.current,self.pageSize);
      self.showPaginationType(self.type);
    }
    a.appendChild(aTxt);
    jump.appendChild(a);
    return jump;
  },
  createPrevPage: function(){
    var self = this;
    var prevPage = document.createElement('li');
    prevPage.className = 'prev';
    var a = document.createElement('a');
    a.href = 'javascript:void(0);';
    a.className = 'prev';
    var prevPageATxt = document.createTextNode(self.paginationText.prevPageText);
    a.appendChild(prevPageATxt);
    prevPage.appendChild(a);
    if(self.current == 1){
      prevPage.setAttribute('disabled','true');
    }
    prevPage.onclick = function(){
      if(self.current <= 1) return;
      self.current = self.current*1 - 1;
      self.onPage(self.current,self.pageSize);
      self.showPaginationType(self.type);
    }
    return prevPage;
  },
  createNextPage: function(){
    var self = this;
    var nextPage = document.createElement('li');
    nextPage.className = 'next';
    var a = document.createElement('a');
    a.href = 'javascript:void(0);';
    a.className = 'next';
    var nextPageATxt = document.createTextNode(self.paginationText.nextPageText);
    a.appendChild(nextPageATxt);
    nextPage.appendChild(a);
    if(self.current == self.pageNum){
      nextPage.setAttribute('disabled','true');
    }
    nextPage.onclick = function(){
      if(self.current >= self.pageNum) return;
      self.current = self.current*1 + 1;
      self.onPage(self.current,self.pageSize);
      self.showPaginationType(self.type);
    }
    return nextPage;
  },
  createLi: function(){
    var self = this;
    var liArray = [];
    var list = self.pageList();
    if(list && list.length > 0){
      for(var i=0,j=list.length; i < j; i++){
        if(list[i] == 0){
          var node = document.createElement('li');
          var nodeText = document.createTextNode('...');
          node.appendChild(nodeText);
          liArray.push(node);
        }else{
          var liNode = document.createElement('li');
          if(list[i] == self.current){
            liNode.className = 'current';
          }else{
            liNode.className = '';
          }
          var aNode = document.createElement('a');
          aNode.href = 'javascript:void(0)';
          var aNodeTxt = document.createTextNode(list[i]);
          aNode.appendChild(aNodeTxt);
          liNode.onclick = function(){
            var val = this.childNodes[0].innerText;
            self.current = parseInt(val);
            self.onPage(val,self.pageSize);
            self.showPaginationType(self.type);
          }
          liNode.appendChild(aNode);
          if(list[i] == self.current && self.style){
            liNode.getElementsByTagName('a')[0].style.backgroundColor = self.style.currentPageColor;
            liNode.getElementsByTagName('a')[0].style.color = self.style.currentPageFontColor;
          }
          liArray.push(liNode);
        }
      }
    }
    return liArray;
  },

//修正条数选择数组
sizeType:function(){
if(this.sizeType.indexOf(this.pageSize1) == -1){
this.sizeType.push(this.pageSize);
}
this.sizeType.sort(function(a,b){
return a-b;
});
},
//获取页码列表数组
pageList:function(){
var self = this;
self.totalPages();
var pageNum = self.pageNum;
var current = self.current*1;
var list = [];
if(pageNum<=10){
for(var i=1;i<=pageNum;i++){
list.push(i);
}
}else{
var start = current - 5;
var end = current + 5;
if(current<=5){
list = [1,2,3,4,5,6,7,0,pageNum-1,pageNum];
}else if(end>=pageNum){
list = [1,2,0,pageNum-6,pageNum-5,pageNum-4,pageNum-3,pageNum-2,pageNum-1,pageNum];
}else{
list = [1,0,current-2,current-1,current,current+1,current+2,0,pageNum];
}
}
return list;
}
}
window.Pagination = Pagination;
})(window)
</script>

<script type="text/javascript">
var a = new Pagination({
//容器
el:'z-page',
//当前页码
current:1,
//总记录数
total:155,
//每页显示条数
pageSize:10,
//分页模式
type:"normal",
//是否显示分页数量下拉项
isShowSizeOption:true,
paginationText:{
goBtnText:'go',
prevPageText:'<',
nextPageText:'>',
pageText:'page',
goText:' ',
totalPageText:'total '
},
style:{
borderColor:'#fff',
currentPageColor:'blue',
hoverPageColor:'yellow',
color:'#ccc',
fontSize:'14px'
},
//回调函数
onPage:function(num,size){
console.log(num+","+size);
}
});
var a2 = new Pagination({
//容器
el:'z-page2',
//当前页码
current:1,
//总页码
total:15,
//每页显示条数
pageSize:10,
//分页模式
type:"simple",
//是否显示分页数量下拉项
isShowSizeOption:false,
isShowTotal:true,
//回调函数
onPage:function(num,size){
console.log(num+","+size);
}
});
var a2 = new Pagination({
//容器
el:'z-page3',
//当前页码
current:1,
//总页码
total:315,
//每页显示条数
pageSize:10,
//分页模式
//回调函数
onPage:function(num,size){
console.log(num+","+size);
}
});
</script>
</body>
</html>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,980评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,178评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,868评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,498评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,492评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,521评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,910评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,569评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,793评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,342评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,931评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2赞 342

推荐阅读更多精彩内容

  • snapshot-1.0.0.js
    "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,027评论 0赞 2
  • js中的事件（event）
    什么是事件： 我们可以简单的把事件理解为浏览器的感知系统。比如说：他可以感觉到用户是否点击（click）了页面、鼠...
    张松1366阅读 6,759评论 1赞 6
  • JS—事件对象
    在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素...
    Miss____Du阅读 5,122评论 0赞 7
  • jquery-1.4.2.js
    /*! jQuery JavaScript Library v1.4.2 http://jquery.com/ C...
    ssttIsme阅读 1,919评论 2赞 0
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,400评论 1赞 45