溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
需求分析
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 ，點此下載
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
