JS分页
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS分页相关的知识，希望对你有一定的参考价值。
js分页，比较粗陋，之后再行改善
1 //分页 2 function pagination(id, config) { 3 //总的 当前页 4 this.id = id; 5 this.total = config.total; //总的数据量 6 //当前页 默认0 7 if(config.curIndex){ 8 this.curIndex=config.curIndex-1; 9 }else{ 10 this.curIndex = 0; 11 } 12 //首页 13 this.firstIndex = 0; 14 //下一页 15 this.nextIndex = 1; 16 //末页 17 this.endIndex = config.total - 1; 18 //显示页数范围 默认6页 19 this.pageRange=6; 20 //默认显示条数 21 if(config.size){this.size=config.size;} 22 else{this.size=20;} 23 //总的页数 24 this.pageTotal = Math.ceil(this.total/this.size); 25 this.callBack=config.callBack; 26 var dsp=document.getElementById(id).style["display"]; 27 if(this.total<=this.size){ 28 if(dsp!="none"){document.getElementById(id).style["display"]="none";} 29 }else{ 30 if(dsp!="block"){document.getElementById(id).style["display"]="block";} 31 this.init(); 32 } 33 } 34 pagination.prototype = { 35 setPagition:function(t){ 36 // var _d=document,_ele=_d.getElementById(id),_index=t.curIndex; 37 var _d=document,id=t.id,_ele=_d.getElementById(id),_index=t.curIndex,pageTotal=t.pageTotal,pageRange=t.pageRange,halfPageRange=pageRange/2; 38 _ele.innerhtml=‘‘; 39 40 var _startIndex=0,_endIndex=0,_rL=pageTotal-_startIndex; 41 //如果小于分页栏要显示的数目，按照索引显示 total 10 pageRange 6 pageTotal-curIndex<6 pageRange*1.5>total>pageRange 42 if(pageTotal<pageRange){ 43 _startIndex=0; 44 _endIndex=pageTotal-1; 45 } 46 else { 47 if(_index<halfPageRange){ 48 _startIndex=0; 49 _endIndex=pageRange-1; 50 } 51 else if(pageTotal-_index<=pageRange){ 52 _startIndex=pageTotal-pageRange; 53 _endIndex=pageTotal-1; 54 }else{ 55 _startIndex=_index-halfPageRange+1; 56 _endIndex=_startIndex+pageRange-1; 57 } 58 } 59 var _spTotal=document.createElement("span"); 60 _spTotal.innerHTML="共有条"+t.total+"数据" 61 _ele.appendChild(_spTotal); 62 63 var a=_d.createElement("a"); 64 a.href="javascript:void(0)"; 65 a.id=id+"-first"; 66 a.innerHTML="首页"; 67 _ele.appendChild(a); 68 69 var aPre=a.cloneNode(); 70 aPre.id=id+"-prev"; 71 aPre.innerHTML="上一页"; 72 _ele.appendChild(aPre); 73 74 for(var i=_startIndex;i<=_endIndex;i++){ 75 var aNum=a.cloneNode(),_i=i+1; 76 aNum.id=id+"-num-"+_i; 77 aNum.innerHTML=_i; 78 if(_index==i){ 79 aNum.className="On NavNow";//On NavNow 80 } 81 _ele.appendChild(aNum); 82 } 83 84 var aNext=a.cloneNode(); 85 aNext.id=id+"-next"; 86 aNext.innerHTML="下一页"; 87 _ele.appendChild(aNext); 88 89 var aEnd=a.cloneNode(); 90 aEnd.id=id+"-end"; 91 aEnd.innerHTML="尾页"; 92 _ele.appendChild(aEnd); 93 }, 94 init: function() { 95 var d = document,_t= this,_boxId=_t.id; 96 _t.setPagition(_t); 97 var _m = d.getElementById(_t.id); 98 _m.onclick = function(e) { 99 //_evt 事件源,_tar 源节点,_tp 点击类型,_curIndex 点击的当前页,_curEle 当前节点,_bCurIndex 点击之前的页面索引,_total=_t.total 数据总数 100 var _evt,_tar,_tp,_curIndex,_curEle,_bCurIndex,_total=_t.total,_size=_t.size,_pageTotal=Math.ceil(_total/_size),_end=_pageTotal-1; 101 102 //如果只有一页 103 if(_pageTotal==1){return;} 104 _evt = e || window.event; 105 _tar = _evt.target||_evt.srcElement; 106 107 _tp = _tar.id.split(‘-‘)[1]; 108 _bCurIndex=_t.curIndex; 109 if (_tp == "prev") { 110 //_curIndex >0 不是第一页，切换页码数字pgSeria的显示 , 111 if(_bCurIndex>0){ 112 _curIndex=_bCurIndex-1; 113 _t.curIndex=_curIndex; 114 }else{ 115 return false; 116 } 117 } else if (_tp == "next") { 118 //不是最后一页 119 if(_bCurIndex<_end){ 120 _curIndex=_bCurIndex+1; 121 _t.curIndex=_curIndex; 122 }else{ 123 return false; 124 } 125 } else if (_tp == "first") { 126 //当前页不是第一页 127 if(_bCurIndex!=0){ 128 _curIndex=0; 129 _t.curIndex=_curIndex; 130 }else{ 131 return false; 132 } 133 } else if (_tp == "end") { 134 //当前页不是最后一页 135 if(_bCurIndex!=_end){ 136 _curIndex=_end; 137 _t.curIndex=_curIndex; 138 }else{ 139 return false; 140 } 141 142 } else if (_tp == "num") { 143 //与点击之前不是同一页 144 var _eleTxt=parseFloat(_tar.innerHTML); 145 if((_bCurIndex+1)==_eleTxt){return false;} 146 else{ 147 _curIndex=_eleTxt-1; 148 _t.curIndex=_curIndex; 149 } 150 151 } 152 if(typeof(_t.callBack)==‘function‘){ 153 //alert(_t.curIndex); 154 _t.callBack(_t); 155 } 156 157 } 158 } 159 }
调用页
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title></title> 7 <script src="js/pagiNation.js"></script> 8 <style> 9 .NavNow{background: red;} 10 .PageNav{height: 34px;margin-top: 20px;width: 100%;text-align: center;} 11 .PageNav a{display: inline-block;border: 1px solid #dcdcdc;padding: 0 10px;margin: 0 3px;background-color: #ffffff;} 12 .PageNav a.On{color: #ffffff;border: 1px solid #bc1b21;background-color: #bc1b21;} 13 </style> 14 </head> 15 16 <body> 17 <div class="NavCtn PageNav" id="pa1"></div> 18 <script> 19 // 20 window.onload = function() { 21 var config = { 22 total: 627, 23 size:10, 24 callBack:function(t){ 25 // getfundnotice(); 26 t.setPagition(t); 27 } 28 } 29 var pa1 = new pagination("pa1", config); 30 } 31 </script> 32 </body> 33 34 </html>
以上是关于JS分页的主要内容，如果未能解决你的问题，请参考以下文章
谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js