一個簡單好用的原生分頁外掛
阿新 • • 發佈:2018-11-14
1. pagetion.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>分頁標籤</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <style> body{ font-size: 12px; color: #333333; } a{ margin :2px; } .selected{ background-color:#FFFFCC; padding:2px; border:1px solid #999999; } </style> </head> <body> <div id="paging"></div> <script type="text/javascript"> PagingBar = function(config){ //當前分頁標籤產生的HTML程式碼渲染的目標物件 this.render; //總記錄數 this.total; //一共顯示多少頁 this.page=7; //每頁記錄數 this.size = 20; //當前第幾頁 this.current = 1; for(var i in config){ this[i]=config[i]; } this.init=function(){ this.render=(typeof this.render==="string")?document.getElementById(this.render):this.render; } this.init(); this.createHref=function(html,index){ var href = document.createElement("A"); href.href="javascript:void(0);"; href.innerText = html; if(this.current===index){ href.className="selected"; } href.onclick = function(paging,ind){ return function(){ paging.current = ind; paging.html(); //console.log(paging.current); } }(this,index); return href; }; this.html=function(){ this.render.innerHTML=""; //var str= new StringBuffer(); //計算總頁數 var totalPage =this.total%this.size===0?this.total/this.size:this.total%this.size+1; /*var text=document.createTextNode("共"+this.total+"條 每頁"+this.size+"條 共"+totalPage+"頁"); text.appendData(" 當前第"+this.current+"頁"+((this.current-1)*this.size+1)+"-"+(this.current*this.size)+" 條 "); this.render.appendChild(text);*/ if(this.current > 1) { this.render.appendChild(this.createHref("首頁",1)); this.render.appendChild(this.createHref("上一頁",this.current-1)); }else{ text = document.createTextNode("首頁 上一頁"); this.render.appendChild(text); } //顯示中間數字頁 7 中 4 =8 4 7-1 6/3+1 //2 < 4 var m=(this.page%2===0?this.page/2:(this.page-1)/2+1); //噹噹前頁數<每頁多少頁/2 的時候,點選不需要改變數字 //當總記錄數-當前頁數>每頁記錄數/2時候,點選時不需要改變數字 var start; var end; //1,2,3,4 if((this.current<= m) || totalPage-this.current <= m) { //當 var t=totalPage<this.page?0:totalPage-this.page; var start =this.current<=m?0:t; var end = start+this.page>=totalPage?totalPage:start+this.page; }else{ var start =this.current-m; var end = start+this.page; } for(var i = start + 1; i <= end; i++){ this.render.appendChild(this.createHref(i, i)); } if(this.current < totalPage){ this.render.appendChild(this.createHref("下一頁",this.current + 1)); this.render.appendChild(this.createHref("尾頁",totalPage)); } else { text = document.createTextNode("下一頁 尾頁"); this.render.appendChild(text); } } }; var pb = new PagingBar({ total:300, page: 7, current: 1, render: 'paging' }); pb.html(); </script> </body> </html>