jQuery+ajax非同步分頁

$(obj).ajaxPage(setting);是擴充jQuery的一個方法,名為 非同步分頁, 可設定幾個參數再配合後端的處理很快的達到分頁效果, 且自訂輸出;用法:

1, 引用ajaxPage css檔案; (該檔案為頁碼顯示樣式, 可合并到你的樣式裡);

2, 引用 jQuery類庫, 建議使用jQuery 1.8.3;

3, 引用ajaxPage.js檔案;

4, $(obj).ajaxPage(setting); //obj為分頁內容輸出的容器, 為jQuery的選取器; 建議使用id; setting為配置的參數;

seting
參數	類型	描述
url	string	必選參數, 可在裡面使用變數{page}表示當前頁; 如:  /index.asp?page={page}&type=xl , /index_{page}.html, /index.php?page={page}&pageSize={paeSize}等
pageId	jQuery對象	必選參數,為分頁輸出的容器; 如: pageId:$("#page") ;
content	string || function	必選參數;為內容輸出格式,裡面的資料跟據後端返回所定; string類型: content: "<ul>[data]標題:{title}[/data]</ul>" ;  // data為後端返回名稱,詳情見下面後端處理; function類型:  content: function () {return "<ul>[data]標題:{title}[/data]</ul>"}, 其中可用this來調用配置的參數; 如: content : function () {return this.page*1<12?'<ul>[data]<li>標題:{title},時間:{time},點擊:{hit}</li>[/data]</ul>':"大於"; }
pageSize	number	每頁多少條資料,如果設定的話可在url中用{pageSize}替換;預設為10;
page	number	當前載入頁,預設為1;
beforeSend	function	請求資料前調用; 如做載入提示等; 如: beforeSend: function () {$("#loading").fadeIn()};
complete	function	請求完畢後調用; 可把載入提示關閉等;
noData	string	沒有資料時顯示在內容輸出容器顯示的;預設為:沒有找到;
run	boolean	是否開始載分頁,預設為否; 如:  run:true, 則程式會馬上執行分頁;
對外暴露的方法
run()	運行分頁程式;可做成按需載入等; 如: var a = $("#xl").ajaxPage(setting);//  setting裡會配置必須參數; setTimeout(function () {    a.run(); },2000); 注意: 預設運行run()後載入的 setting.page頁; setting.run 跟 run()一樣;
get(i);	載入等幾頁; 有 "first" 第一頁, "last"最後一頁, "next"下一頁, "pre"上一頁可選, 否則可給數字如:  : var a = $("#xl").ajaxPage(setting);//  setting裡會配置必須參數; setTimeout(function () {   a.get("last"); //跳到最後一頁; },2000); 為了最佳化在沒有請求當前的請求再請求會直接忽略;如: a.get(1).get(2).get(3);  //在沒有請求1成功後2,3都直接忽略; 注意:使用get()前,必須保證你已經run過; 當前頁載入當前頁無效;
後端處理
接收參數	前端會以setting.url中的格式給後端請求,(目前暫只支援get)如: i.php?page=1&pageSize=10,後端接收後請進行程式上的處理返回前端;(pageSize也可不傳,前端和後端統一寫死也可) 注意:請不要相信前端的傳參,為了安全請過慮或者轉義;
傳回值	{"code":0} 沒有資料時返回 {"code":1,"pageCount":16,"recordCount":156,"data":[{"title":"謝亮","time":20120505},{"title":"你","time":55555}]}// 其中code:1 為響應碼, paegCount: 為一共多少頁; recordCount: 為一共多少條資料; data是一個迴圈數組, 該資料直接會通過 setting.content中過慮後顯示在內容容器, data可自己定義,該名直接跟 content:"[data][/data]"對應即可,data裡的迴圈為{} 對象, 裡面的鍵名直接對應content中的[data]裡的 {}變數即可; 這裡感謝Dmimi:  http://dmimi.sentsin.com/
例子
最小化	$("#xl").ajaxPage({     url:"page.php?get=xl&page={page}", //後端也讓pageSize = 10 是個固定值     pageId:$("#page"),     run:true,    content:'<ul>[data]<li>標題:{title},時間:{time},點擊:{hit}</li>[/data]</ul>' });
有載入提示	$("#xl").ajaxPage({ url:"page.php?get=xl&page={page}", pageId:$("#page"), run:true, content: function () { return '<ul>[data]<li>標題:{title},時間:{time},點擊:{hit}</li>[/data]</ul>'; }, beforeSend:function () { $("#loading").fadeIn(); }, complete:function () { $("#loading").stop().fadeOut(); } });
前10頁是一種HTML格式,後面是一種HTML格式	$("#xl").ajaxPage({ url:"page.php?get=xl&page={page}&pageSize={pageSize}", pageId:$("#page"), //run:true, content: function () { return this.page*1>=10?'<ul>[data]<li>標題:{title},時間:{time},點擊:{hit}</li>[/data]</ul>':"我是後10頁[data]{title}[/data]"; } });
按需要載入	var a = $("#xl").ajaxPage({ url:"page.php?get=xl&page={page}", pageId:$("#page"), content: '<ul>[data]<li>標題:{title},時間:{time},點擊:{hit}</li>[/data]</ul>' }); $(window).scroll(function () { ///code 請做緩衝 a.run(); });
4000ms後載入最後一頁	var a = $("#xl").ajaxPage({ url:"page.php?get=xl&page={page}", pageId:$("#page"), run:true, content: '<ul>[data]<li>標題:{title},時間:{time},點擊:{hit}</li>[/data]</ul>' }); setTimeout(function () { a.get("last");// },4000);
優缺點
優點, 代碼輕量,易擴充,一個頁面可多次使用,配合一些設定後可做常見的評論,列表等; 缺點, 目前只支援get, 不支援jsonp,post等; 如您發現bug請反饋給463004799->謝亮;

demo地址: http://www.xuexb.com/demo/page/page.html

js源碼下載: http://www.xuexb.com/demo/page/page.js