使用amaze ui的分頁樣式封裝一個通用的JS分頁控制項

標籤：自己的   ati   效果   執行個體   網盤   回調   .com   向上取整   ini   

　　作為一名碼農，天天百度、偶爾Google，所有代碼全靠copy，用第三方外掛程式，偶爾也想著造造輪子，畢竟自己的骨肉總歸比較親。

　　今天有點空閑時間，想起我們公司之前套的頁面的分頁外掛程式上還有bug，而寫那個分頁外掛程式的小夥子已經離職，就決定自己來寫一個。

　　首先，肯定是用我們的妹子UI做樣式效果，畢竟開發妹子少，做的東西能和妹子沾點邊，就沾一點，畢竟妹子比較好看。

　　然後

　　開始吧

　　第一步

　　　　找到妹子UI的分頁HTML代碼，一共有2種，我喜歡第一種，比較有顏

　　　　

　　　　這是妹子UI的分頁代碼

　　　　

<ul data-am-widget="pagination"      class="am-pagination am-pagination-default"      >      <li class="am-pagination-first ">        <a href="#" class="">第一頁</a>      </li>      <li class="am-pagination-prev ">        <a href="#" class="">上一頁</a>      </li>            <li class="">              <a href="#" class="">1</a>            </li>            <li class="am-active">              <a href="#" class="am-active">2</a>            </li>            <li class="">              <a href="#" class="">3</a>            </li>            <li class="">              <a href="#" class="">4</a>            </li>            <li class="">              <a href="#" class="">5</a>            </li>      <li class="am-pagination-next ">        <a href="#" class="">下一頁</a>      </li>      <li class="am-pagination-last ">        <a href="#" class="">最末頁</a>      </li>  </ul>

　　　　代碼簡單，外觀漂亮，自然是封裝的首選啦。

　　　　好了

　　　　接下來，就是造輪子的時間了，首先講講思路：我們需要一個動態分頁，那麼這個裡面的 li 就必須是動態產生的，所以需要用js去產生dom元素，其次，使用者需要一個回呼函數，用來分頁之後去請求他的資料，載入資料，這是核心的2個思路，剩下的就是分頁常規的一些東西，比如分頁必須的參數：當前頁、每頁條數、總條數，以及這個樣式對應的一些事件的處理：首頁、尾頁、上一頁、下一頁。

　　　　思路整理完畢，開整。

　　　　1、初始化

　　　　　　init初始化函數，裡面將使用者傳入進來的參數賦值，並計算下總頁數，總頁數說明下，我是以0為第一頁，所以總頁數為 總條數/每頁條數  使用 Math.ceil 向上取整 -1 即為總頁數。

function fm_page(cnf) {    var fmpage = {        id:‘page‘,        pageNo : 0,// 當前頁        pageSize : 10,// 每頁條數        pageCount : 100,// 總條數        showPageNum : 5,// 分頁元素長度        pageNum:0,// 總頁數        pageCmp:null,        start:0,        init : function() {             var it = this;             if (cnf) {                 $.each(cnf, function(k, v) {                     it[k]=v;                 });             }            this.pageNum=Math.ceil(this.pageCount/this.pageSize)-1;        }    }    fmpage.init();    return fmpage;}

　　　　2、js動態載入li

　　　　　　根據使用者想顯示的數量動態載入li,start 為li的起始數字

renderPage:function(start) {             this.start = start || 0;             this.pageCmp=$("#"+this.id);             this.pageCmp.empty();             this.pageCmp.append(‘<li ><a onclick="{0}" class="">第一頁</a></li>‘.replace(‘{0}‘,this.id+‘.toFirst()‘));             this.pageCmp.append(‘<li ><a onclick="{0}" class="">上一頁</a></li>‘.replace(‘{0}‘,this.id+‘.toPrev()‘));             var endNum=this.pageCount/this.pageSize>(this.showPageNum+this.start)?(this.showPageNum+this.start):this.pageCount/this.pageSize;// 截止元素                         for(var i=this.start;i<endNum;i++)                 {                    var chose = i == this.pageNo? this.choseClass : ‘‘;                     var li=‘<li class={1} ><a  onclick="{2}" class="">{0}</a></li>‘;                     this.pageCmp.append(li.replace(‘{0}‘,i+1).replace(‘{1}‘,chose).replace(‘{2}‘,this.id+‘.toPage({0})‘.replace(‘{0}‘,i)) );                 }                          this.pageCmp.append(‘<li ><a onclick="{0}"  class="">下一頁</a></li>‘.replace(‘{0}‘,this.id+‘.toNext()‘));             this.pageCmp.append(‘<li ><a onclick="{0}" class="">最末頁</a></li>‘.replace(‘{0}‘,this.id+‘.toLast()‘));        }

　　　　3、首頁、尾頁、下一頁、上一頁、跳轉等函數

toNext:function(){            this.pageNo = this.pageNo==this.pageNum?this.pageNo:this.pageNo+1;            if(this.pageNo>=this.start+this.showPageNum&&this.pageNo<(this.pageNum)){                this.start=this.start+this.showPageNum;                this.renderPage(this.start);            }                            if(this.pageNo<=(this.pageNum))                this.liCls();        },        toPrev:function(){            this.pageNo = this.pageNo==0?0:this.pageNo-1;            if(this.pageNo<(this.start)){                this.start=this.start-this.showPageNum;                this.renderPage(this.start);            }            if(this.pageNo>=0)                this.liCls();        },        toFirst:function(){            this.pageNo=0;            if(this.pageNo<(this.start)){                this.start=0;                this.renderPage(this.start);            }            this.liCls();        },        toLast:function(){            this.pageNo=this.pageNum;            if(this.pageNo>=this.start+this.showPageNum){                this.start=this.pageNum-this.showPageNum+1;                this.renderPage(this.start);            }            this.liCls();        },        toPage:function(pageNo){            this.pageNo=pageNo;            this.liCls();        },

　　　　4、跳轉後要將某頁選中，並調用回呼函數

liCls : function() {            this.pageChange(this.pageNo);            this.pageCmp.find(‘li:eq(‘ + (this.pageNo - this.start + 2) + ‘)‘)                        .siblings(‘li‘).removeClass(this.choseClass).end()                        .addClass(this.choseClass);        },        pageChange:function(pageNo){                    }

　　　　5、經過測試，調整、最佳化，沒有發現問題，編寫注釋，這個分頁控制項

　　　　　使用注意：調用必須執行個體化，且接收參數名與ul的id一致

　　　　　 優點：a、本身使用妹子ui，漂亮、代碼簡潔

　　　　　　　　b、經封裝後，調用簡單，無暗病

　　　　　　　　c、還支援自訂樣式，只需要你在ul上綁定你自己想要的class，並配置選擇效果class即可

　　最後，附上完整的控制項代碼，百度網盤：fmpage

 

使用amaze ui的分頁樣式封裝一個通用的JS分頁控制項