【自然架構】js版的QuickPager分頁控件 V2.0

優點：

1、  通過更換模闆可以控制各個分頁元素（比如首頁、末頁，頁号導航等）的位置和是否顯示。

2、  通過更換css可以實作各種UI風格和效果。（附帶24套css效果）

3、  Js的方式建立分頁UI，不占用伺服器資源。

4、  可以通過插件的方式更換各部分js代碼。如果自帶的js代碼不能滿足您的需求，那麼您自己寫的插件實作需要的效果。

5、  Ajax的方式擷取記錄集，減輕網絡負擔。

6、  多種調用方式，讓“偷懶”和靈活共存。

缺點：

1、  不支援SEO。因為用js和ajax，是以不支援搜尋引擎的收錄。

2、  不支援伺服器端控件，比如GridView。

内容介紹：

1、  模闆

　　設定一個htm頁面，存放分頁用的模闆，這樣隻要保證及格ID不變，其他的都可以随意編排，想怎麼編排就怎麼編排，限制降到最低。模闆如下： 

　　

2、  Css

　　用css來控制UI樣式。這樣更換css檔案就可以實作更換風格。前一陣子有園友分享了24套樣式，借鑒了一下。在這裡大家一起感謝園友的分享。 

3、  Js腳本

　　分為三個部分，預設值、主體和擴充。

　　預設值就不用多說了，要想讓分頁能夠順利跑起來需要設定很多屬性，但是過多的屬性設定就很煩了，于是就有了“預設值”。常用的屬性值作為預設屬性，這樣在調用的時候就不用重複設定一大堆的屬性了。

　　主體，這個主體有一點MVC裡的C的感覺——總體上的控制：加載模闆、設定UI、建立頁号導航、注冊翻頁事件等等。他本身并不實作具體的功能，而是把這些功能組合起來。

　　擴充，每一個功能都作為了一個擴充插件的形式，比如建立頁号導航。頁号導航有很多總形式，一中形式肯定不能滿足所有人的需求，那麼怎麼辦呢？把每種形式都羅列出來嗎？這樣整個分頁代碼就會比較臃腫。是以就想到了這種擴張的形式。在主體外面實作頁号導航的功能，在主體裡調用。如果自帶的不能滿足，那麼可以把自己寫一個替換掉自帶的。而總體結構不會發生變化。達到了“對擴充開放，對修改關閉”。

使用方法：

1、  設定“屬性”。

　　雖然屬性有很多，但是最低隻需要設定兩個屬性——總記錄數和存放分頁控件的容器ID。

　　不設定總記錄數，就不知道有多少頁，頁号導航就做不出來，UI也沒法控制。而總記錄數又沒法設定預設值。

　　存放分頁控件的容器ID，簡單的說就是DIV的ID，當然也可以放在td裡面，隻要設定好ID就行。如果要實作上下兩個分頁UI，那麼隻需要把這兩個ID用半形逗號分割，設定上就行。

2、  設定事件。

　　翻頁的時候觸發的事件。Js的事件處理真的是太簡單了，就跟屬性一樣。弄個function就可以了。

　　翻頁的時候觸發OnPageChange ，傳遞過來兩個參數，一個是翻頁前的頁号(oldPageIndex)，一個是要翻到哪一頁( thisPageIndex)。

3、  開始呈現。

　　屬性和事件設定好了之後就可以呈現了。調一個函數就可以，内部會自動調用OnPageChange(0,1)來呈現第一頁的資料。如果呈現之後還要做點什麼的話，可以加一個回調函數。

線上示範：

可以更換模闆，可以更換css

鳴謝!

　　感謝群裡的兄弟們幫忙做測試，發現了幾個小bug和沒注意到的地方。

　　如果大家也挺感興趣的話，歡迎加群：82598514