javascript 分页组件
自己写的一个简单的分页组件,主要功能还有实现都在JS中,html页面中只用增加一个放置生成分页的DIV,并给定容器的id.
html结构如下:
<ul class="pagination" id="pageDIV"> </ul>
class="pagination" 给定了分页的样式,
id="pageDIV"用于放置JS生成的分页
CSS结构如下:
.pagination{ margin-top: 10px; margin-bottom: 10px; display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px; } .pagination>li { display: inline; } .pagination>li:first-child>a{ margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .pagination>li>a{ position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #337ab7; text-decoration: none; background-color: #fff; border: 1px solid #ddd; cursor: pointer; } .pagination>li>a.navcur{ background: #cccccc; color: #ffffff; }
下面是JS结构,注意要引用JQuery
/** * @pageContentID 渲染分页的DIV元素 * @curPage 当前开始页 * @totalCount 总数量 * @pageRows 每页显示数量 * @callback 显示数据的回调函数 */ function PageList(pageContentID,option){ this.pageContentID=document.getElementById(pageContentID); this.curPage=option.curPage; this.totalCount=option.totalCount; this.pageRows=option.pageRows; this.callback=option.callback; this.pageSize=Math.ceil(this.totalCount/this.pageRows); } PageList.prototype={ init:function(){ this.renderbtn(); }, firstpage:function(){ var _self=this; _self._firstpage=document.createElement("li"); _self._firstpageA=document.createElement("a"); _self._firstpageA.innerHTML="首页"; _self._firstpage.appendChild(_self._firstpageA); this.pageContentID.appendChild(_self._firstpage); _self._firstpage.onclick=function(){ _self.gotopage(1); } }, lastpage: function () { var _self=this; _self._lastpage=document.createElement("li"); _self._lastpageA=document.createElement("a"); _self._lastpageA.innerHTML="尾页"; _self._lastpage.appendChild(_self._lastpageA); this.pageContentID.appendChild(_self._lastpage); _self._lastpage.onclick= function () { _self.gotopage(_self.pageSize); } }, prewpage: function () { var _self=this; _self._prew=document.createElement("li"); _self._prewA=document.createElement("a"); _self._prewA.innerHTML="<<"; _self._prew.appendChild(_self._prewA); this.pageContentID.appendChild(_self._prew); _self._prew.onclick= function () { if(_self.curPage>1){ _self.curPage--; } _self.callback.call(this,this.curPage); _self.init(); console.log(_self.curPage); } }, nextpage: function () { var _self=this; _self._next=document.createElement("li"); _self._nextA=document.createElement("a"); _self._nextA.innerHTML=">>"; _self._next.appendChild(_self._nextA); this.pageContentID.appendChild(_self._next); _self._next.onclick= function () { if(_self.curPage<_self.pageSize){ _self.curPage++; } _self.callback.call(this,this.curPage); _self.init(); console.log(_self.curPage); } }, pagenum: function () { var _self=this; if(this.pageSize<=10){ for(var i= 1,len=this.pageSize;i<=len;i++){ _self._num=document.createElement("li"); _self._numA=document.createElement("a"); _self._numA.innerHTML=i; _self._num.appendChild(_self._numA); this.pageContentID.appendChild(_self._num); _self._num.onclick= function () { var curpage = $(this).text(); _self.gotopage(curpage); } } } else{ if(_self.curPage<=10){ for(var i= 1;i<=10;i++){ _self._num=document.createElement("li"); _self._numA=document.createElement("a"); _self._numA.innerHTML=i; _self._num.appendChild(_self._numA); this.pageContentID.appendChild(_self._num); _self._num.onclick= function () { var curpage = $(this).text(); _self.gotopage(curpage); } } } else if(_self.curPage>10&&_self.curPage<=this.pageSize){ if(this.pageSize<Math.ceil(_self.curPage/10)*10){ for(var i=Math.floor(_self.curPage/10)*10+1;i<=this.pageSize;i++){ if(_self.curPage>this.pageSize) return; _self._num=document.createElement("li"); _self._numA=document.createElement("a"); _self._numA.innerHTML=i; _self._num.appendChild(_self._numA); this.pageContentID.appendChild(_self._num); _self._num.onclick= function () { var curpage = $(this).text(); _self.gotopage(curpage); } } }else{ if(Math.ceil(_self.curPage/10)*10==_self.curPage){ for(var i=_self.curPage-9;i<=_self.curPage;i++){ _self._num=document.createElement("li"); _self._numA=document.createElement("a"); _self._numA.innerHTML=i; _self._num.appendChild(_self._numA); this.pageContentID.appendChild(_self._num); _self._num.onclick= function () { var curpage = $(this).text(); _self.gotopage(curpage); } } }else{ for(var i=Math.floor(_self.curPage/10)*10+1;i<=Math.ceil(_self.curPage/10)*10;i++){ _self._num=document.createElement("li"); _self._numA=document.createElement("a"); _self._numA.innerHTML=i; _self._num.appendChild(_self._numA); this.pageContentID.appendChild(_self._num); _self._num.onclick= function () { var curpage = $(this).text(); _self.gotopage(curpage); } } } } } } $(".pagination li").each(function(){ if($(this)[0].innerText==_self.curPage){ $(".pagination li").children("a").removeClass("navcur"); $(this).children("a").addClass("navcur"); } }); }, gotopage: function (curpage) { this.curPage=curpage; this.callback.call(this,this.curPage); this.init(); console.log(this.curPage); }, renderbtn: function () { $(".pagination").html(""); this.firstpage(); this.prewpage(); this.pagenum(); this.nextpage(); this.lastpage(); } }; $(function(){ var pager = new PageList("pageDIV",{ curPage:1, totalCount:26, pageRows:1, callback:callbackFuc }); pager.init(); }); function callbackFuc(curpage){ }
说明:
此分页是以10页为标准,低于10页的时候全部显示,大于10页的时候,进行翻页显示余下页数.
调用方法:
$(function(){ var pager = new PageList("pageDIV",{ curPage:1, totalCount:26, pageRows:1, callback:callbackFuc }); pager.init(); });
