基于原生JS實現(xiàn)分頁效果的示例代碼

第基于原生JS實現(xiàn)分頁效果的示例代碼這個只是一個分頁的demo，主要是思路整理(很久之前項目用的東西)

分頁實現(xiàn)的效果主要是左側(cè)上一頁右側(cè)是下一頁中間顯示主要是超過5個顯示省略號然后是可配置選項

實現(xiàn)之后的效果

首先需要初始化該對象的一些基本屬性，顯示總頁碼數(shù),中間顯示的頁面數(shù),添加一個回調(diào)函數(shù)，在頁面變化激活回調(diào)函數(shù)并返回當(dāng)前頁面和一些需要的其他參數(shù)init為對象初始化的方法(里面的參數(shù)都是可以寫成活的，我這里偷懶了所以寫成死的了)這個里的z_page可以接是接口返回的總頁數(shù)

functionPage(obj){

this.obj=obj||{page:1,page_count:0};

this.z_page=7;//一共顯示的頁碼數(shù)

this.show_page=this.z_2;//中間顯示多少個頁碼必須是個基數(shù)好看

this.fn=this.obj.block;

this.init()

}

在init在初始化方法里主要是判斷

1總頁數(shù)是否小于顯示頁面（這個主要是判斷是否顯示省略號，添加省略號比較麻煩,這個是總頁數(shù)少不用添加）

2當(dāng)前頁面數(shù)+左右顯示的平均數(shù)(show_page/2-1)+1和總頁面相比這個主要判斷省略號在前面的問題(靠近尾頁)前面有省略號

3左右顯示的平均數(shù)(show_page/2-1)+2(最前面1和最后的書)大于當(dāng)前頁面數(shù)(靠近首頁)

第一個圖片(后面有省略號)

4剩下的狀態(tài)就是中間狀態(tài)(兩側(cè)有省略號)

這個判斷其實也是要判斷咱們分頁的邊界條件，如果這個想好了并且實現(xiàn)了相當(dāng)于就完成了一半初始化方法的最后是要給上一頁和下一頁，有數(shù)字的頁簽添加點擊事件并且做相應(yīng)邏輯處理代碼的實現(xiàn)

Ptotype.create=function(){

//page:1page_count17

//保證被點擊的頁數(shù)在中間

varping=(this.show_1)/2;//左右顯示的平均數(shù)在中間

varnum=this.obj.ping;//最小頁碼

varendnum=(this.obj.page+ping)this.obj.page_countthis.obj.page_count:(this.obj.page+ping)//最大頁碼

console.log(endnum);

varpageID=document.getElementById('pageID');

varself=this;

pageID.innerHTML='';

num=num11:num;

if(this.obj.page_count=this.z_page){

alert('smallPage');

this.smallPage()

}elseif((this.obj.page+ping+1)=this.obj.page_count){//還要加上最后一個接近尾頁

pageID.appendChild(this.nearBack())

console.log('尾巴')

}elseif((ping+2)=(this.obj.page)){//3接近首頁

pageID.appendChild(this.nearHome())

console.log('臨近首頁')

}else{

console.log(num,endnum);

pageID.appendChild(this.centerPage(num,endnum));

document.onclick=function(event){

switch(event.target.className){

case'previous':

self._previous();

break;

case'next':

self._next();

break;

default:

self.clickLi(event.target);

self.fn(self.obj.page)

};

剩下的就是只想邏輯和dom操作了因為是用的原生js,這里是用的文檔碎片，把我生成的dom全部都放到文檔碎片里，然后一次性返出來直接append到body上這個是我的方法代碼

Ptotype.nearBack=function(){

varoFragmeng=document.createDocumentFragment();//創(chuàng)建了一個文檔碎片

varul=document.createElement('ul')

varDiv=oFragmeng.appendChild(ul);

Div.innerHTML='li1/lili/li

for(varm=(this.obj.page_count-this.show_page);m=this.obj.page_count;m++){

varli1=document.createElement('li');

li1.innerHTML=m;

if(m===this.obj.page){

li1.c