基于原生JS怎么實現分頁效果

這篇文章主要介紹“基于原生JS怎么實現分頁效果”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“基于原生JS怎么實現分頁效果”文章能幫助大家解決問題。

實現之后的效果

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

 function Page(obj) {
     this.obj = obj||{page:1,page_count: 0};
     this.z_page = 7;    // 一共顯示的頁碼數
     this.show_page = this.z_page-2; // 中間顯示多少個頁碼  必須是個基數好看
     this.fn = this.obj.block;
     this.init()
 }

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

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

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

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

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

4 剩下的狀態就是中間狀態(兩側有省略號)

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

Page.prototype.create = function () {
     // page:1 page_count 17
     // 保證被點擊的頁數在中間
     var ping = (this.show_page-1)/2; // 左右顯示的平均數  在中間
     var num = this.obj.page-ping; // 最小頁碼
     var endnum =  (this.obj.page+ping)>this.obj.page_count?this.obj.page_count:(this.obj.page+ping) // 最大頁碼
     console.log(endnum);
     var pageID = document.getElementById('pageID');
     var self= this;
     pageID.innerHTML = '';
     num = num<1?1:num;
     if (this.obj.page_count<= this.z_page) {
         alert('smallPage');
         this.smallPage()
     } else if( (this.obj.page+ping+1)>=this.obj.page_count) {// 還要加上最后一個   接近尾頁
         pageID.appendChild(this.nearBack())
         console.log('尾巴')

     } else if ((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上 這個是我的方法代碼

 Page.prototype.nearBack = function () {
     var oFragmeng = document.createDocumentFragment(); // 創建了一個文檔碎片
     var ul = document.createElement('ul')
     var Div = oFragmeng.appendChild(ul);
      Div.innerHTML = '<li>1</li><li>....</li>';
     for (var m=(this.obj.page_count- this.show_page);m<=this.obj.page_count;m++) {
         var li1 = document.createElement('li');
         li1.innerHTML = m;
         if (m===this.obj.page) {
             li1.className = 'active'
         }
         Div.appendChild(li1)
     }
    return oFragmeng.firstChild;
 };

關于“基于原生JS怎么實現分頁效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。