需求分析

　　1）需要首頁，末頁功能

　　2）有點擊查看上一頁，下一頁功能

　　3）頁碼到當前可視頁碼最后一頁刷新頁面

實現思路

也是分為三部分處理

　　1）點擊首頁，末頁直接顯示第一頁或者最后一頁內容，當前頁面為第1頁或者最后一頁。隱藏首頁或者末頁按鈕。demo 顯示截圖

　　首頁狀態 和 末頁狀態代碼執行結果截圖

　　2）點擊可視頁碼截圖

　　3）點擊上一頁或者下一頁，，需要刷新頁碼狀態時截圖，昨天表示當前頁碼為7，右圖是點擊上一頁，刷新頁碼時的狀態

代碼參數說明

<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script><script src="data/data.js" type="text/javascript"></script><script src="js/sendAjax.js" type="text/javascript"></script><script src="js/page.js" type="text/javascript"></script><script> /* 初始化頁面 */ var initTotalPageNum = 11; $("#ui-page").paging({pageSize:5,totalPage:initTotalPageNum}); </script>

為了區分清楚，所以把每一個文件都分開寫了。

data.js 　　　　　　　　　　　　　　//是用json模擬的后臺數據.

sendAjax.js 　　　　　　　　　　　　//是模擬的ajax請求后臺數據的文件

page.js 　　　　　　　　　　　　　　//是封裝的生成頁碼的功能

initTotalPageNum　　　　　　　　//模擬的后臺傳入的數據總頁碼

pageSize　　　　　　　　　　　　//自定義參數，可以定義可視區域代碼,當前demo。pageSize = 5,initTotalPageNum=3 小于pageSize 的時候，顯示狀態如下圖所示

代碼優缺點

　　1）使用ajax可以實現局部刷新，但是不利于seo

　　2) 生成頁碼沒有改變dom結構，只變化頁碼

最近項目中的需求，自己寫的一個。有時間的話會用js實現一遍。

有需要的話，完整demo ，點此下載 

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。