一：需求分析 1）需要首頁，末頁功能 2）有點擊查看上一頁，下一頁功能 3）頁碼到當前可視頁碼最後一頁刷新頁面 二：功能實現思路 也是分為三部分處理 1）點擊首頁，末頁直接顯示第一頁或者最後一頁內容，當前頁面為第1頁或者最後一頁。隱藏首頁或者末頁按鈕。demo 顯示截圖 首頁狀態 和 末頁狀態代碼執
一：需求分析
1）需要首頁，末頁功能
2）有點擊查看上一頁，下一頁功能
3）頁碼到當前可視頁碼最後一頁刷新頁面
二：功能實現思路
也是分為三部分處理
1）點擊首頁，末頁直接顯示第一頁或者最後一頁內容，當前頁面為第1頁或者最後一頁。隱藏首頁或者末頁按鈕。demo 顯示截圖
首頁狀態 和 末頁狀態代碼執行結果截圖
2）點擊可視頁碼截圖
3）點擊上一頁或者下一頁，，需要刷新頁碼狀態時截圖，昨天表示當前頁碼為7，右圖是點擊上一頁，刷新頁碼時的狀態
三：代碼參數說明
1 <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> 2 <script src="data/data.js" type="text/javascript"></script> 3 <script src="js/sendAjax.js" type="text/javascript"></script> 4 <script src="js/page.js" type="text/javascript"></script> 5 <script> 6 /* 初始化頁面 */ 7 var initTotalPageNum = 11; 8 $("#ui-page").paging({pageSize:5,totalPage:initTotalPageNum}); 9 </script>
為了區分清楚，所以把每一個文件都分開寫了。
data.js //是用json模擬的後臺數據.
sendAjax.js //是模擬的ajax請求後臺數據的文件
page.js //是封裝的生成頁碼的功能
initTotalPageNum //模擬的後臺傳入的數據總頁碼
pageSize //自定義參數，可以定義可視區域代碼,當前demo。pageSize = 5,initTotalPageNum=3 小於pageSize 的時候，顯示狀態如下圖所示
四：代碼優缺點
1）使用ajax可以實現局部刷新，但是不利於seo
2) 生成頁碼沒有改變dom結構，只變化頁碼
最近項目中的需求，自己寫的一個。有時間的話會用js實現一遍。
有需要的話，完整demo 下載 pageAjax.zip
