前幾天打開自己的博客園主頁，發現自己的園齡竟然有4年之久了，沒記錯的話剛接觸編程就知道了博客園，也就是說我入坑4年了？時光啊~。剛學習編程的時候最喜歡的就是來園子里聽大神們吹牛逼，看着他們裝逼就覺得很過癮，也學到了很多知識和技能。說來也慚愧，自己卻沒能為園友們分享自己的所學所得（畢竟水平爛！）。
過去的一年也是輾轉了幾個城市換了幾份工作（注定本命年不太平？）。八月份來到現在所在的公司（OTA行業），公司是做互聯網的，所以可能大家的前端都看起來很屌？之前一直從事.NET開發（現在在這邊也是），js也用的很少。於是趁着這個機會跟着大家學學js。本文要說到的插件就是在學習的過程中自己開發的。
如果你還對jQuery插件開發沒有任何了解，推薦一篇文章 http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html（博客園的前端大神很多啊，前段時間在園子看到很多優秀的js文章）
如果有javascript基礎，用過jquery，看了上面的文章，我相信媽媽再也不用擔心你不會jQuery插件開發了。
既然說到基於jQuery的ajax分頁插件，那我們就先看看主要的代碼結構：（我覺得對咱們程序員來說再優美的文字描述、介紹也比不上代碼來得實在。Talk is cheap,Show me the code!）
1、首先定義一個pager對象：
1 var sjPager = window.sjPager = { 2 opts: { 3 //默認屬性 4 pageSize: 10, 5 preText: "pre", 6 nextText: "next", 7 firstText: "First", 8 lastText: "Last", 9 shiftingLeft: 3, 10 shiftingRight: 3, 11 preLeast: 2, 12 nextLeast: 2, 13 showFirst: true, 14 showLast: true, 15 url: "", 16 type: "POST", 17 dataType: "JSON", 18 searchParam: {}, 19 beforeSend: null, 20 success: null, 21 complete: null, 22 error: function () { 23 alert("抱歉,請求出錯,請重新請求！"); 24 }, 25 }, 26 pagerElement: null,//分頁dom元素 27 commonHtmlText: { 28 //公共文本變量 29 }, 30 init: function (obj, op) { 31 //對象初始化 32 }, 33 doPage: function (index, pageSize, searchParam) { 34 //執行分頁方法 35 }, 36 getTotalPage: function () { 37 //獲取總頁數 38 }, 39 createPreAndFirstBtn: function (pageTextArr) { 40 //創建上一頁、首頁按鈕鏈接 41 }, 42 createNextAndLastBtn: function (pageTextArr) { 43 //創建下一頁、尾頁按鈕鏈接 44 }, 45 createIndexBtn: function (pageTextArr) { 46 //中間分頁索引按鈕鏈接 47 }, 48 renderHtml: function (pageTextArr) { 49 //渲染分頁控件到頁面 50 }, 51 createSpan: function (text, className) { 52 //創建span 53 }, 54 createIndexText: function (index, text) { 55 //創建索引文本 56 }, 57 jumpToPage: function () { 58 //跳轉到 59 } 60 }
對象包含了分頁的屬性及用到的方法，doPage()為分頁的核心方法。
2、進行jQuery擴展
1 $.fn.sjAjaxPager = function (option) { 2 return sjPager.init($(this), option); 3 };
3、插件使用
1 <body> 2 3 <table id="dataTable" border="1px"></table> 4 <div id="pager"></div> 5 </body>
1 $(function() { 2 $('#pager').sjAjaxPager({ 3 url: "Handler1.ashx", 4 pageSize: 10, 5 searchParam: { 6 /* 7 * 如果有其他的查詢條件，直接在這里傳入即可 8 */ 9 id: 1, 10 name:'test', 11 }, 12 beforeSend: function () { 13 }, 14 success: function (data) { 15 /* 16 *返回的數據根據自己需要處理 17 */ 18 var tableStr = "<tr><td>Id</td><td>姓名</td><td>年齡</td></tr>"; 19 $.each(data.items, function(i,v) { 20 tableStr += "<tr><td>" + v.Id + "</td><td>" + v.Name + "</td><td>" + v.Age + "</td></tr>"; 21 }); 22 23 $('#dataTable').html(tableStr); 24 }, 25 complete: function () { 26 } 27 }); 28 29 30 })
有沒有發現使用方式與直接使用ajax基本是一樣一樣的？
最后我們可以看下出來的效果：（表格樣式沒有設置比較丑，分頁樣式自己也可以根據需要修改css文件）
F12打開調試工具，點擊分頁查看發送的請求及響應：
pageIndex和pageSize為插件默認的參數，在后台可以直接在Request中獲取。特別需要注意的是插件的響應也是需要遵循特定的格式{"total":0,"items":[]}，如上圖中所示total代表數據總記錄數，items代表分頁的數據。
這里只有代碼的大體結構及呈現的效果，大家不妨自己先動手實現一下，需要源碼及DEMO的可以去我的github下載：https://github.com/sujing910206/ajax-pager DEMO是.NET實現的，但是如果是其他語言，實現的方式也都一樣。
寫在最后：
最后，請允許我矯情一下，就一下下（此處應該有害羞的表情⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄）。本命年終於快過去，過去的一年離開了呆了六年的地方還有很多一起玩耍的小伙伴，當然也加入了單身狗行列。來到深圳，我不知道我為何來會來深圳，完全陌生的一座城市，或許是有人告訴我這里適合年輕人，或許是聽說這里冬天很暖和，也或許只是不想再繼續呆在原來的地方。其實從很小開始就一個人在外面求學、工作，早已習慣了一個人在外面漂泊，難道是我這一生注定放縱不羈愛自由？啊哈哈哈哈。剛來這邊的時候除了不適應還是不適應，可謂人生地不熟，也沒有怎么出去玩過。現在也是，每天基本都是兩點一線，周末才偶爾會去打打球唱唱歌來自娛自樂。終於快等到了猴年馬月，新的一年希望我的生活能更豐富、交更多的朋友（女朋友），領悟更多的編程思想，堅持擼代碼。好了，技術聖地不談情感，希望這篇文章對你有幫助！