本身diy一個jquery分頁插件

js基礎學習過程當中，期間經歷換工做的各類面試，不少面試官問過：有沒有寫過jquery插件？等相似問題。

就我的而言，關於jquery插件的文章確實看過很多，可是一直沒有動手寫一個，一是不想在目前學習js基礎知識的時候，插入jQuery的插件的寫法；二也是從思想上，可能也沒太作好寫插件的準備，老是感受很麻煩，或者說很困難。

可是經歷屢次的面試以後，以爲仍是有必要抓緊時間寫一點插件，哪怕當作本身我的前端組件積累的一部分，也得提上日程了。

在新公司入職以後，正好項目剛剛上線，新的需求尚未下來，手頭上並無分到新的需求，就利用這段時間，決定寫寫jQuery插件了。由易而難，先寫了一個模擬select的下拉選擇框的插件，給了本身充足的信心。着手分頁插件的寫法。

從早上到公司開始入手，因爲經驗上的問題，對於插件須要傳入的參數，或者說未來能夠自定製的部分考慮的可能並非很周全，等想到新的課定製部分的時候，會繼續修改維護。廢話很少說，直接貼代碼。

最終的效果圖如圖所示。

 html部分代碼：

html部分只有一個盛放分頁內容的盒子，class爲pages必不可少，css和插件內部都用到了該class。

css部分是用scss編寫的，直接貼上scss代碼。

 

插件部分核心js代碼：

 

 

 調用部分代碼：

參數解釋一下：

currentPage: 數值，當前的頁碼；totalPage:數值，總頁碼；showPage:數值，須要展現幾個頁碼；showBeginEnd:布爾值，是否須要展現「首頁」和「尾頁」，true展現，false不展現；showPrevNext：布爾值，是否展現「上一頁」和「下一頁」，true展現，false不展現。

以上參數若是都沒傳的話，都有默認值。

callback:回調函數，分頁的核心操做，前臺頁面調用分頁函數以後，進行數據查詢等操做，全部操做在這裏完成。