快捷導(dǎo)航

jQuery實(shí)現(xiàn)分頁(yè)功能（含ajax請(qǐng)求、后臺(tái)數(shù)據(jù)、附完整demo）

更新時(shí)間：2017年04月03日 09:49:19 作者：http://www.cnblogs.com/enemy/p/5253779.html

這篇文章主要給大家介紹了關(guān)于jQuery實(shí)現(xiàn)分頁(yè)功能的相關(guān)資料，主要包含ajax請(qǐng)求和后臺(tái)數(shù)據(jù)，文末給出了完整的demo示例，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。

需求分析

　　1）需要首頁(yè)，末頁(yè)功能

　　2）有點(diǎn)擊查看上一頁(yè)，下一頁(yè)功能

　　3）頁(yè)碼到當(dāng)前可視頁(yè)碼最后一頁(yè)刷新頁(yè)面

實(shí)現(xiàn)思路

也是分為三部分處理

　　1）點(diǎn)擊首頁(yè)，末頁(yè)直接顯示第一頁(yè)或者最后一頁(yè)內(nèi)容，當(dāng)前頁(yè)面為第1頁(yè)或者最后一頁(yè)。隱藏首頁(yè)或者末頁(yè)按鈕。demo 顯示截圖

　　首頁(yè)狀態(tài) 和末頁(yè)狀態(tài)代碼執(zhí)行結(jié)果截圖

　　2）點(diǎn)擊可視頁(yè)碼截圖

　　3）點(diǎn)擊上一頁(yè)或者下一頁(yè)，，需要刷新頁(yè)碼狀態(tài)時(shí)截圖，昨天表示當(dāng)前頁(yè)碼為7，右圖是點(diǎn)擊上一頁(yè)，刷新頁(yè)碼時(shí)的狀態(tài)

代碼參數(shù)說(shuō)明

<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>
 /* 初始化頁(yè)面 */
 var initTotalPageNum = 11;
 $("#ui-page").paging({pageSize:5,totalPage:initTotalPageNum});
 </script>

為了區(qū)分清楚，所以把每一個(gè)文件都分開(kāi)寫(xiě)了。

data.js 　　　　　　　　　　　　　　//是用json模擬的后臺(tái)數(shù)據(jù).

sendAjax.js 　　　　　　　　　　　　//是模擬的ajax請(qǐng)求后臺(tái)數(shù)據(jù)的文件

page.js 　　　　　　　　　　　　　　//是封裝的生成頁(yè)碼的功能

initTotalPageNum　　　　　　　　//模擬的后臺(tái)傳入的數(shù)據(jù)總頁(yè)碼

pageSize　　　　　　　　　　　　//自定義參數(shù)，可以定義可視區(qū)域代碼,當(dāng)前demo。pageSize = 5,initTotalPageNum=3 小于pageSize 的時(shí)候，顯示狀態(tài)如下圖所示