個人react組件化開發道路(二) 分頁 組件開發

        上一篇文章主要寫了關於react組件化開發的一些基本配置，慢慢的深刻到每一個組件的詳細介紹中，今天咱們就來分享react的分頁組件

        組件基本數據

                    

                    current:當前頁碼，默認是第一個

                    pageSize:每頁顯示的頁數，默認是10頁

                    pagesLength：（很重要）這個參數的主要做用是用於控制分頁的按鈕個數，默認是9頁，當數據小於90條(由於每頁是10條數據，則頁數小於9頁),則全部的頁碼直接顯示，如圖：

                        

        若是大於9頁，則採用顯示部分的形式，如圖顯示：

                        

        下面來具體介紹內部邏輯。

        調用函數初始化

                    

        在構造函數裏面初始化基本調用的函數，主要有：上一頁、下一頁、點擊頁碼直接跳轉、前五頁、後五頁，基本調用函數介紹完，則要開始着手分頁的顯示邏輯了。

                

    _initMPagination()函數負責分頁的邏輯，先處理基本數據，pageSize,current,還要計算總頁數(總頁數須要向上取整)，如今咱們獲得了：當前頁碼，總頁數，每頁大小(即每頁顯示數據的條數)。那麼接下來須要作的處理就是判斷總頁數和頁面顯示頁數的大小，若是總頁數小於等於頁面顯示頁數的大小，則直接所有顯示，如圖：

        

    須要爲每個頁碼綁定一個惟一的key值，判斷當前的頁面是否等於i,給當前頁碼不一樣的樣式，而且爲每個頁碼綁定click函數，這樣點擊頁碼的時候能獲取到正確的索引值，這個相對比較簡單，若是總頁數大於頁面顯示頁數的大小，則須要考慮三種狀況

        1：左邊沒有省略號，如圖：

                

        2：右邊沒有省略號，如圖：

                

        3：兩邊都有省略號，如圖：

                

        以上三種狀況的區分經過中心偏移量來判斷：

let offset = (self.state.pagesLength-1)/2;

    先在全部操做前加上上一頁的按鈕：

RenderHtml.push(<li key='pre' className={self.state.current == 1?'M-pagination-prev M-pagination-disabled':'M-pagination-prev'} onClick={self._prePage}><MIcon type="arrowleft"/></li>)

這裏須要判斷當前頁是否爲第一頁，若是是，則點擊按鈕不可用。        

    全部狀況都已經考慮進去，那麼如今就得從代碼層面去分析邏輯，先來判斷左邊沒有省略號的狀況：

            

計算出中心偏移量，這裏獲得爲4，判斷當前頁碼是否大於4，若是小於等於4，則顯示前五頁的頁碼，剩下的使用省略號代替，最後一頁的頁碼是totalPage,一樣的須要爲每個頁碼綁定click事件，傳入正確的索引值，最後一頁傳入totalPage值便可，省略號跳轉頁數稍後再說。

        再來判斷右邊沒有省略號的狀況：

        

        

else if(self.state.current > totalPage - offset)

若是當前頁大於8(總頁數減去中心偏移量獲得爲8)，則右邊沒有省略號，操做跟左邊沒有省略號大同小異，

        剩下的就是兩邊都有省略號的狀況：

           

    兩邊都有省略號的狀況，兩邊的省略號一定第一個頁碼和最後一個頁碼相連，剩下的咱們則須要計算中間顯示多少頁碼，這個時候 pagesLength起到了關鍵的做用，經過兩個for循環，將當前頁左右兩邊顯示對等的頁碼個數。而後返回給 RenderHtml 這個數組，最後：

            

    調用函數

       上一頁：

                    

    判斷當前頁是否爲第一個，若是是，則直接return不作任何操做，若是不是，則將current-1，setState，從新render

      下一頁：

                    

        這裏須要計算下總頁數是多少，而後判斷當前頁是否等於總頁數，若是是，則直接return不作任何操做，若是不是，則將current+1,setState,從新render

      點擊頁碼直接跳轉：

                    

            將傳入的索引值直接替換掉當前的current值。

      點擊左邊的省略號跳轉前五頁：

                    

            判斷當前的頁碼是否大於5，若是是，則將current-5，若是不是，則將當前頁碼設置成第三頁。

      點擊右邊的省略號跳轉後五頁：

                  

            判斷當前頁碼距離最後一頁是否大於5，若是是，則將current+5,若是不是，則將當前頁設置total-2(這裏的total值是在bind的時候傳入的totalPage)；

        調用組件：

            

<MPagination total="109">

    

        目前不夠完善的地方：

                1：由於分頁須要配合表格的顯示才能發揮出最大的做用，而目前僅僅是單個分頁組件，尚未配合表格數據，所以缺乏回調函數，在該回調函數中會傳入當前頁，每頁顯示的數據條數，預期會在下個版本中在表格組件中完善這一功能。

                2：每頁顯示的數據條數應該作成一個下拉框供用戶選擇，目前尚未，下個版本完善。

                3：pagesLength應該可由用戶控制，這樣分頁具體顯示多少個頁碼，用戶的掌控力更強，下個版本完善。

        結束語：

                具體代碼能夠查看：https://git.oschina.net/meichao/React-webpack

                另外，爲何還有那麼幾個小問題不這個版本就作完，要等到下個版本完善呢？爲何？由於我懶，對，我就是懶！！！！