閑話部分   

    最近閑著實(shí)在無聊，就做了點(diǎn)小東西練練手，由于原來一直在用aspNetPager進(jìn)行分頁，而且也進(jìn)行了深度的定制與原有系統(tǒng)整合的也不錯(cuò)，不過畢竟是用別人的，想著看自己能試著做出來不能，后臺(tái)的分頁插件已經(jīng)有比較成熟的了，那就自己試著寫一個(gè)前臺(tái)分頁吧。

話不多說，先上效果圖：

優(yōu)點(diǎn)與缺點(diǎn)

來說說優(yōu)缺點(diǎn)吧，首先AspNetPager是后臺(tái)分頁控件，所以在向客戶端回傳HTML文檔之前生成HTML階段 就會(huì)把分頁代碼生成完畢，然后回傳，而JS是前端代碼，就是HTML文檔在服務(wù)器組織完畢往客戶端傳送完畢之后才登上舞臺(tái)。基于上述的區(qū)別，很容易總結(jié)出下面的優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：

1，輕量級(jí)，引入JS即可，十分方便部署與使用。

2，與后臺(tái)程序語言無關(guān)，可以在任何語言平臺(tái)上使用。

3，減少服務(wù)器負(fù)擔(dān)，減少傳輸成本，加快響應(yīng)速度，改善用戶體驗(yàn)。

4，前端代碼沒有被編譯，方便維護(hù)和管理。

缺點(diǎn)：

1，不支持SEO優(yōu)化。

2，需要單獨(dú)編寫接口。

基本思路

1，我們需要通過一些參數(shù)如：記錄總條數(shù)（itemCount）、每頁條數(shù)（pageSize）來計(jì)算總共可以分的頁數(shù)（pageCount）,itemCount需要通過請(qǐng)求數(shù)據(jù)來獲取，而pageCoun則需要通過用戶來指定。

2，我們需要知道當(dāng)前是在第幾頁（currPage）。當(dāng)頁面首次加載的時(shí)候默認(rèn)為1，用戶也可以指定默認(rèn)加載時(shí)處在第幾頁上。當(dāng)翻頁時(shí)就會(huì)獲得一個(gè)新的currPage。

3，有了這些我們似乎是可以開始工作了，首頁 尾頁很好解決，首頁頁碼永遠(yuǎn)為1，而尾頁頁碼永遠(yuǎn)為pageCount，上一頁 下一頁也可以解決，上一頁為 currPage-1 ，下一頁為 currPage+1。似乎很完美，不過不要忘了，上一頁頁碼為currPage-1只能是 在currPage>1的時(shí)候，而下一頁頁碼為currPage+1則只能是在currPage<pageCount的時(shí)候，我想你一定知道為什么，所以在這里要判斷一下。

4，通過currPage和pageSize，我們可以很輕松的計(jì)算出當(dāng)前顯示的記錄為第幾條~第幾條，前面也獲取到了pageCount,pageSize等數(shù)據(jù)，因此可以拼接字符串，來顯示分頁信息

信息顯示例如：  共12條  第1/4頁  第1~3條  3條/頁

5，重頭戲來了，對(duì)于中間頁碼部分的處理。簡單處理的話很好辦，從1到pageCount依次排列，似乎就可以了，但是不要忘了，假如你這個(gè)列表有幾十頁甚至上百頁，那這樣排列顯然不夠優(yōu)雅，那么我們需要另外一個(gè)參數(shù)，那就是中間顯示頁碼的個(gè)數(shù)（showPageCount）,當(dāng)頁碼很多的時(shí)候，最多只顯示 2×showPageCount+1個(gè)頁碼。你一定會(huì)問，為什么是 2×showPageCount+1，而不是showPageCount。原因是我這里為了判斷方便，showPageCount的含義為，當(dāng)前頁面左右兩邊出現(xiàn)的頁碼個(gè)數(shù)。

例如：總共有10頁，當(dāng)前頁為5，showPageCount為2，

那么頁碼則顯示為：  首頁  上一頁   3  4  5  6  7  下一頁  尾頁

意外情況：如果左邊或者右邊顯示不夠showPageCount的頁碼數(shù)量，為了保持頁碼顯示量是一定的，則會(huì)從另外一側(cè)補(bǔ)全。

例如：總共10也，當(dāng)前頁面為2，showPageCount為4，左側(cè)只有1個(gè)頁面可以顯示，則從右側(cè)補(bǔ)全，

頁碼顯示為：  首頁  上一頁   1  2  3  4  5  6  7  8  9  下一頁   尾頁

6，再在最后設(shè)置一個(gè) Input 和 A 標(biāo)簽用作轉(zhuǎn)到指定頁面功能。

7，到此為止，我們只需要把上面的各個(gè)步驟 分別拼接字符串 輸出到頁面上就OK了，但是，還有一個(gè)重要話題沒有討論，目前為止，我們只是實(shí)現(xiàn)了分頁的結(jié)構(gòu)，但是功能似乎還沒有實(shí)現(xiàn)。實(shí)現(xiàn)功能有兩種方式：

（1），給頁碼標(biāo)簽的 href 屬性綁定對(duì)應(yīng)的鏈接，后面跟參數(shù)如 href="Article.aspx?page=2" 點(diǎn)擊之后帶上頁碼參數(shù)2 去請(qǐng)求第二頁的信息。我們?cè)诤笈_(tái)程序通過Request到page的值，給Repeater控件做相應(yīng)的綁定也好，輸出字符串也好，都可以實(shí)現(xiàn)功能。

（2），添加 onclick 屬性，并綁定函數(shù)，通過函數(shù)做 Ajax 請(qǐng)求，通過響應(yīng)的函數(shù)（可以是鍵值對(duì)，也可以是HTML字符串），來給替換當(dāng)前頁面上的列表，產(chǎn)生新的列表，同時(shí)分頁的當(dāng)前頁也需要更換成對(duì)應(yīng)的當(dāng)前頁，完成之后效果實(shí)現(xiàn)。

第一種很簡單，在拼接字符串的時(shí)候，順帶這把 href  屬性寫了就完事，這里不做過多敘述，關(guān)鍵說第二種，由于采用了ajax 在翻頁的時(shí)候做請(qǐng)求，拿到響應(yīng)數(shù)據(jù)，改寫列表容器，既然如此，那么我們頁面首次加載獲取pageCount的時(shí)候，也可以順便把列表給綁定了。簡單總結(jié)起來大致流程如下：

A:頁面加載——收集請(qǐng)求參數(shù)和查詢條件（currPage為1），ajax請(qǐng)求，拿到響應(yīng)信息（至少包括 itemCount 和 列表信息），通過回調(diào)函數(shù)，用itemCount 計(jì)算分頁的各項(xiàng)參數(shù) 生成分頁，通過列表信息，生成列表，完成初次加載。

B:翻頁事件——再次收集求情和查詢條件（currPage為當(dāng)前頁碼），ajax請(qǐng)求，拿到響應(yīng)信息（至少包括 itemCount 和 列表信息），通過回調(diào)函數(shù)，用itemCount 計(jì)算分頁的各項(xiàng)參數(shù) 拼接字符串改寫分頁容器內(nèi)容，通過列表信息，改寫列表容器內(nèi)容，完成初次加載。

我們可以直觀的發(fā)現(xiàn)，A事件和B事件，流程基本一致，唯一的區(qū)別就是 currPage的值不同，因此我們可以做一個(gè)類似于遞歸的方法（不算嚴(yán)格意義上的遞歸），我們寫一個(gè) Load() 函數(shù)來用作 列表和分頁的首次加載，在容器值被改寫過之后，需要給 頁碼的 onclick 事件綁定函數(shù)，此時(shí)我們綁用本身這個(gè)Load()函數(shù)，所以每次點(diǎn)擊后仍然綁定的是Load()方法。這樣一段代碼，就可以在兩個(gè)事件中重復(fù)使用了。

8，關(guān)于傳參，剛才我們一直提到 手機(jī)請(qǐng)求參數(shù)和查詢條件，例如：容器ID，列表所屬分類ID，每頁條數(shù)，URL格式等等。 那么我們究竟如何把參數(shù)傳遞到方法中去？想實(shí)現(xiàn)目的，以下幾種方式都可以。

A：聲明全局變量，在函數(shù)中調(diào)用，但是這種方式會(huì)造成大量的變量冗余，同時(shí) Load()函數(shù)需要 傳入大量的參數(shù)，如：Load(agrA，agrB , agrC , agrD , agrE , agrF ... )，不可取。

B : 傳入Json字符串，通過鍵值對(duì)的方式傳入?yún)?shù)，這種方法，雖說只有一個(gè)參數(shù)，但是在編寫的時(shí)候過于繁瑣，而且無法指定默認(rèn)值，或者可選項(xiàng)，需要在JS中重新判斷，不可取。

C : 如果說上面兩個(gè)都PASS掉了，那么你一定知道接下來要做什么了，沒錯(cuò)！javaScript是一門面向?qū)ο蟮恼Z言，雖然經(jīng)常被人們忽略，但是他是可以使用對(duì)象和面向?qū)ο蟮囊恍┚幊谭绞降模虼宋覀兛梢越⒎猪摰膶?shí)體類，然后每次調(diào)用的時(shí)候，new() 出來一個(gè)新的對(duì)象，這樣既可以保證同一個(gè)頁面有多個(gè)分頁的時(shí)候互不沖突，同時(shí)又可以優(yōu)雅地指定我們的屬性值，還可以通過類似于構(gòu)造函數(shù)的方式進(jìn)行默認(rèn)值的初始化。

調(diào)用方式

引入jquery、ruguoPager和CSS：

1 <script src="js/jquery-1.11.1.min.js"></script>2 <script src="js/ruguoPager-1.0.js"></script>3 <link rel="stylesheet" href="css/ruguoPager.css">

編寫html結(jié)構(gòu)指定好ID：

<div class="ctn">　　<div class="news" name="pager1">　　　　<ul class="list" id="news_ul"></ul>　　　　<div class="box_height_1000px"></div>　　　　<div class="ruguoPager_red" id="pager1"></div>　　</div></div>

在HTML頁面上加入script標(biāo)簽 指定對(duì)象參數(shù) 進(jìn)行分頁

 1 <script> 2 　　var pager = new ruguoPager(); 3 　　pager.pagerType="ajax"; 4 　　pager.objName="pager"; 5 　　pager.pagerID="pager1"; 6 　　pager.listID="news_ul"; 7　　 pager.toPoint="pager1" 8　　 pager.showPageSize=4; 9 　　pager.pageSize=3;10 　　pager.currPage=1;11 　　pager.typeID=63;12 　　pager.pagerUrl="news/list_{ruguo:pageNum}.html";13 　　pager.itemStr="<li><a href='news/detail_{ruguo:id}.html'>{ruguo:title}</a>[{ruguo:datetime}]</li>";14 　　pager.ajaxUrl="ajax/getArticleList.ashx";15 　　ruguoPagerLoad(pager);16 </script>

參數(shù)列表(參數(shù)名，參數(shù)含義，可選值，必須)

總結(jié)

在編寫插件的過程中，遇到了很多實(shí)際的問題，并一個(gè)一個(gè)的加以解決，得到了不少心得，在這里總結(jié)一下。

1，類的使用

    在寫Javascript的時(shí)候，尤其是在Jquery被廣泛使用知乎，我們往往會(huì)在頁面中羅列一個(gè)接一個(gè)的函數(shù)， 但是有時(shí)候我們嘗試著使用一下類，會(huì)使得代碼變得更加優(yōu)雅。在寫這個(gè)插件之前，只知道JS可以寫類，實(shí)例化對(duì)象，但是究竟怎么用，卻從來沒試過，甚至怎么定義一個(gè)類都不知道。通過本例，初步了解了JS中類的基本使用方式。

2，函數(shù)的重載

    在解決 Load() 函數(shù)重用問題上，我想使用重載，但是根據(jù)自己的猜想，試了一下沒有成功，經(jīng)過查資料發(fā)現(xiàn)正確的使用方式。在C#中我們知道，方法可以重載，要求方法名相同，返回類型或者形參類型、數(shù)量不同。然而針對(duì)于JS來說，是沒有重載一說的，因?yàn)镴S是若類型語言，在調(diào)用方法的時(shí)候，根本沒有參數(shù)類型以及返回類型一說。雖然如此，好在參數(shù)個(gè)數(shù)還是可以檢測到的，所以根據(jù)這一特點(diǎn)，可以進(jìn)行模擬重載，但是注意并非真正重載。

3，全局變量

    在寫插件時(shí)候，第一次實(shí)例化的對(duì)象，并把對(duì)象的各個(gè)屬性通過AJAX傳遞，拿到了響應(yīng)信息，完成了分頁和列表的首次加載。當(dāng)點(diǎn)擊分頁時(shí)候，需要再次執(zhí)行同樣的操作，因此需要再次進(jìn)行實(shí)例化對(duì)象，這樣一來方法就無法復(fù)用，意味著，頁面上每多一個(gè)分頁，就需要copy一份js用作不同的 在點(diǎn)擊分頁時(shí)候的實(shí)例化。所以我就在想，點(diǎn)擊分頁事件時(shí)候的對(duì)象，與第一次的對(duì)象不一樣的僅僅只是當(dāng)前頁碼而已，所以通過對(duì)象本身包含對(duì)象名的方式，在綁定分頁事件方法時(shí)，把對(duì)象名當(dāng)作參數(shù)放在了Load()方法中，并多了一個(gè)當(dāng)前頁參數(shù)，通過模擬重載 順利完成Load()方法的復(fù)用。雖然JS沒有非常嚴(yán)格的訪問級(jí)別，但是我想寫在文檔流中的變量應(yīng)該都是全局變量，在初次實(shí)例化時(shí)候的對(duì)象同樣也是，所以綁定分頁事件方法中的參數(shù) 應(yīng)該是可以調(diào)用到 全局對(duì)象的，結(jié)果證明我的猜想完全正確。

4，ajax分頁用戶體驗(yàn)

    通過ajax分頁時(shí)候會(huì)有一個(gè)問題，那就是點(diǎn)擊分頁之后，由于頁面并不刷新或者跳轉(zhuǎn)，而是直接修改了頁面容器的內(nèi)容，所以頁面會(huì)保持在列表最下方不動(dòng)，每次點(diǎn)擊完分頁，需要手動(dòng)把網(wǎng)頁撥回到最頂部，然后再慢慢往下翻著看，很麻煩，所以我做了一個(gè)本地描點(diǎn)，在初次實(shí)例化的時(shí)候需要傳錨點(diǎn)ID，點(diǎn)擊之后，返回到錨點(diǎn)處。
效果類似于騰訊新聞列表的效果：http://news.QQ.com/top_index.shtml

5，jquery綁定事件傳參

    在寫插件過程中，起初用到了需要往jquery綁定事件中傳參，由于習(xí)慣了使用 例如 $("a").click(function(){ alert("hello world"); });這樣的綁定方式，所以如何往click事件所執(zhí)行的方法中傳入?yún)?shù)一時(shí)間十分苦惱，后來經(jīng)過查詢，知道了可以使用 這樣的方式進(jìn)行傳參：$("a").bind("click",{myValue:hello world},function(event){ alert(event.data.myValue) }); ，雖然后來有了更好的方式，無需傳參了，但是也算是一個(gè)不小的收獲吧。

6，當(dāng)json遇上HTML

    json是我們網(wǎng)上常用的傳遞數(shù)據(jù)的格式，而且js可以很輕松的解析，但是由于json遇到html中的 尖括號(hào)（< >）會(huì)出現(xiàn)問題，無法正確返回，因此，我們需要響應(yīng)數(shù)據(jù)的時(shí)候進(jìn)行HTML編碼，在回調(diào)函數(shù)中，對(duì)拿到的編碼后的字符串進(jìn)行反編碼。另外順帶提一下，在使用eval()解析數(shù)據(jù)的時(shí)候最好里面再套上一個(gè)"("+data+")"，原因是json中的大括號(hào)會(huì)影響js的結(jié)構(gòu)。

存在的問題

1，代碼重用部分，其實(shí)并沒有把url與ajax的方式完全區(qū)分開，由于當(dāng)使用url的時(shí)候，初次加載列表和 總頁數(shù) 可以通過后臺(tái)綁定出來，因此在點(diǎn)擊分頁的時(shí)候，就無需再次請(qǐng)求數(shù)據(jù)，僅僅進(jìn)行前臺(tái)的計(jì)算即可，可以減少一次請(qǐng)求。

2，代碼寫的比較亂，大伙湊合著看吧。

3，本人才疏學(xué)淺，寫代碼純屬業(yè)余興趣愛好，還望跟各位大神多多學(xué)習(xí)，存在的問題或者是更好的解決方案，還請(qǐng)不吝賜教，幫助我完善插件，網(wǎng)上成熟的插件有很多，本人獻(xiàn)丑不敢說分享勞動(dòng)成果工，只能說在學(xué)習(xí)中遇到的問題拿來給暫時(shí)還沒有遇到的人，少走一些彎路，同時(shí)滿足一下自己小小的成就感，僅此而已。

代碼與文章都是博主辛苦一點(diǎn)一點(diǎn)碼出來的，請(qǐng)尊重博主辛勤勞動(dòng)，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明出處，更多交流請(qǐng)關(guān)注 D調(diào)碼農(nóng)的筆記簿 http://m.survivalescaperooms.com/webconfig

最后放出下載地址

相關(guān)文檔下載：http://files.VEVb.com/webconfig/ruguoPager.rar