這篇文章主要分享一個(gè)自己寫的簡(jiǎn)單的javascript分頁(yè)組件，效果十分不錯(cuò)，代碼也很詳盡，這里推薦給小伙伴們。

自己寫的一個(gè)簡(jiǎn)單的分頁(yè)組件,主要功能還有實(shí)現(xiàn)都在JS中,html頁(yè)面中只用增加一個(gè)放置生成分頁(yè)的DIV,并給定容器的id.

html結(jié)構(gòu)如下:

代碼如下:

<ul class="pagination" id="pageDIV">

</ul>

class="pagination" 給定了分頁(yè)的樣式,

id="pageDIV"用于放置JS生成的分頁(yè)

CSS結(jié)構(gòu)如下:

代碼如下:

.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結(jié)構(gòu),注意要引用JQuery

代碼如下:

/**

* @pageContentID 渲染分頁(yè)的DIV元素

* @curPage 當(dāng)前開(kāi)始頁(yè)

* @totalCount 總數(shù)量

* @pageRows 每頁(yè)顯示數(shù)量

* @callback 顯示數(shù)據(jù)的回調(diào)函數(shù)

*/

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="首頁(yè)";

_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="尾頁(yè)";

_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){

}

說(shuō)明:

此分頁(yè)是以10頁(yè)為標(biāo)準(zhǔn),低于10頁(yè)的時(shí)候全部顯示,大于10頁(yè)的時(shí)候,進(jìn)行翻頁(yè)顯示余下頁(yè)數(shù).

調(diào)用方法:

代碼如下:

$(function(){

var pager = new PageList("pageDIV",{

curPage:1,

totalCount:26,

pageRows:1,

callback:callbackFuc

});

pager.init();

});

以上就是本分頁(yè)組件的核心代碼了，希望小伙伴們能夠喜歡。

更多信息請(qǐng)查看IT技術(shù)專欄