需求分析

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ō)明

/* 初始化頁(yè)面 */

var initTotalPageNum = 11;

$("#ui-page").paging({pageSize:5,totalPage:initTotalPageNum});

為了區(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)如下圖所示

代碼優(yōu)缺點(diǎn)

1)使用ajax可以實(shí)現(xiàn)局部刷新，但是不利于seo

2) 生成頁(yè)碼沒(méi)有改變dom結(jié)構(gòu)，只變化頁(yè)碼

最近項(xiàng)目中的需求，自己寫(xiě)的一個(gè)。有時(shí)間的話會(huì)用js實(shí)現(xiàn)一遍。

有需要的話，完整demo ，點(diǎn)此下載

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)我們的支持。

時(shí)間： 2017-03-31

總結(jié)

以上是生活随笔為你收集整理的java ajax实现分页代码,jQuery实现分页功能（含ajax请求、后台数据、附完整demo）...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。