自己寫的一個簡單的分頁組件,主要功能還有實現都在JS中,html頁面中只用增加一個放置生成分頁的DIV,並給定容器的id.
html結構如下:
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 顯示資料的回呼函數
*/
函數PageList(pageContentID, 選項){
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={
初始化：函數（）{
this.renderbtn();
},
第一頁：函數（）{
var _self=這個;
_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);
}
},
最後一頁：函數 () {
var _self=這個;
_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= 函數 () {
_self.gotopage(_self.pageSize);
}
},
前頁：函數 () {
var _self=這個;
_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=函數() {
if(_self.curPage>1){
_self.curPage--;
}
_self.callback.call(this,this.curPage);
_self.init();
console.log(_self.curPage);
}
},
下一頁：函數 () {
var _self=這個;
_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=函數() {
if(_self.curPage<_self.pagesize>
_self.curPage ;
}
_self.callback.call(this,this.curPage);
_self.init();
console.log(_self.curPage);
}
},
頁數：函數 () {
var _self=這個;
if(this.pageSize
for(var i= 1,len=this.pageSize;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= 函數 () {
var curpage = $(this).text();
_self.gotopage(curpage);
}
}
}
其他{
if(_self.curPage
for(var i= 1;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= 函數 () {
var curpage = $(this).text();
_self.gotopage(curpage);
}
}
}
else if(_self.curPage>10&&_self.curPage
if(this.pageSize
for(var i=Math.floor(_self.curPage/10)*10 1;i
if(_self.curPage>this.pageSize)
返回；
_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= 函數 () {
var curpage = $(this).text();
_self.gotopage(curpage);
}
}
}其他{
if(Math.ceil(_self.curPage/10)*10==_self.curPage){
for(var i=_self.curPage-9;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= 函數 () {
var curpage = $(this).text();
_self.gotopage(curpage);
}
}
}其他{
for(var i=Math.floor(_self.curPage/10)*10 1;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= 函數 () {
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: 函數 (curpage) {
this.curPage=curpage;
this.callback.call(this,this.curPage);
this.init();
console.log(this.curPage);
},
renderbtn: 函數 () {
$(".pagination").html("");
this.firstpage();
this.prewpage();
this.pagenum();
this.nextpage();
this.lastpage();
}
};
$(函數(){
var pager = new PageList("pageDIV",{
curPage:1,
總數：26，
頁行：1,
回調：callbackFuc
});
pager.init();
});
函數callbackFuc(curpage){
}
說明：
此分頁以10頁為標準，低於10頁的時候全部顯示，大於10頁的時候，進行翻頁顯示餘下頁數。
呼叫方法：
$(函數(){
var pager = new PageList("pageDIV",{
curPage:1,
總數：26，
頁行：1,
回調：callbackFuc
});
pager.init();
});
以上就是本分頁元件的核心程式碼了，希望朋友們能夠喜歡。
