美文网首页
zhanggongzi

zhanggongzi

作者: zhanggongzi | 来源:发表于2018-08-28 23:20 被阅读0次

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>

相关文章

  • zhanggongzi

    var eventDo = {addHandler:function(ele,type,fn){if(ele.ad...

网友评论

      本文标题：zhanggongzi

      本文链接：https://www.haomeiwen.com/subject/rnpcwftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|zhanggongzi|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！