jQuery實(shí)現(xiàn)分頁功能（含ajax請求、后臺數(shù)據(jù)、附完整demo）
需求分析
1）需要首頁，末頁功能
2）有點(diǎn)擊查看上一頁，下一頁功能
3）頁碼到當(dāng)前可視頁碼最后一頁刷新頁面
實(shí)現(xiàn)思路
也是分為三部分處理
1）點(diǎn)擊首頁，末頁直接顯示第一頁或者最后一頁內(nèi)容，當(dāng)前頁面為第1頁或者最后一頁。隱藏首頁或者末頁按鈕。demo 顯示截圖
首頁狀態(tài) 和 末頁狀態(tài)代碼執(zhí)行結(jié)果截圖
2）點(diǎn)擊可視頁碼截圖
3）點(diǎn)擊上一頁或者下一頁，，需要刷新頁碼狀態(tài)時(shí)截圖，昨天表示當(dāng)前頁碼為7，右圖是點(diǎn)擊上一頁，刷新頁碼時(shí)的狀態(tài)
代碼參數(shù)說明
<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>
為了區(qū)分清楚，所以把每一個(gè)文件都分開寫了。
data.js //是用json模擬的后臺數(shù)據(jù).
sendAjax.js //是模擬的ajax請求后臺數(shù)據(jù)的文件
page.js //是封裝的生成頁碼的功能
initTotalPageNum //模擬的后臺傳入的數(shù)據(jù)總頁碼
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) 生成頁碼沒有改變dom結(jié)構(gòu)，只變化頁碼
最近項(xiàng)目中的需求，自己寫的一個(gè)。有時(shí)間的話會(huì)用js實(shí)現(xiàn)一遍。
有需要的話，完整demo ，點(diǎn)此下載
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
- 用jQuery中的ajax分頁實(shí)現(xiàn)代碼
- JQuery+Ajax無刷新分頁的實(shí)例代碼
- jQuery Pagination Ajax分頁插件(分頁切換時(shí)無刷新與延遲)中文翻譯版
- jQuery DataTables插件自定義Ajax分頁實(shí)例解析
- JS+Ajax+Jquery實(shí)現(xiàn)頁面無刷新分頁以及分組 超強(qiáng)的實(shí)現(xiàn)
- 使用PHP+JQuery+Ajax分頁的實(shí)現(xiàn)
- MVC+jQuery.Ajax異步實(shí)現(xiàn)增刪改查和分頁
- 使用Jquery+Ajax+Json如何實(shí)現(xiàn)分頁顯示附JAVA+JQuery實(shí)現(xiàn)異步分頁
- jQuery插件select2利用ajax高效查詢大數(shù)據(jù)列表（可搜索、可分頁）
- jquery+Ajax實(shí)現(xiàn)簡單分頁條效果
相關(guān)文章
這篇文章主要介紹了jQuery的ajax下載blob文件的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
這篇文章主要介紹了做好七件事幫你提升jQuery的性能的相關(guān)資料,需要的朋友可以參考下2014-02-02
33個(gè)優(yōu)秀的jQuery 教程分享(幻燈片、動(dòng)畫菜單)
jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架，使用簡單靈活，在現(xiàn)在的Web開發(fā)項(xiàng)目中扮演著重要角色。這篇文章與大家分享33個(gè)優(yōu)秀的 jQuery 教程，教您如何使用 jQuery 制作幻燈片、動(dòng)畫菜單、照片墻、圖片畫廊等很多效果很炫的功能。2011-07-07
jQuery插件slider實(shí)現(xiàn)拖動(dòng)滑塊選取價(jià)格范圍
jquery滑塊（slider）允許用戶從一個(gè)有限的范圍內(nèi)選擇一個(gè)數(shù)值。當(dāng)沿著軌道移動(dòng)滑塊控件時(shí)，將顯示一個(gè)表示當(dāng)前值的提示框，用戶可通過設(shè)置它的屬性來自定義滑塊。2015-04-04
jQuery如何定位到頁面具體位置，我們可以通過jQuery的aminate動(dòng)畫方法定位，下面有個(gè)不粗的示例，感興趣的朋友可以參考下2013-12-12
filter() 方法返回符合一定條件的元素。該方法讓您規(guī)定一個(gè)條件。不符合條件的元素將從選擇中移除，符合條件的元素將被返回。這篇文章主要介紹了 jquery的 filter()方法使用,需要的朋友可以參考下2018-03-03
jQuery獲取頁面及個(gè)元素高度、寬度的總結(jié)——超實(shí)用
這篇文章主要介紹了jQuery獲取頁面及個(gè)元素高度、寬度的總結(jié)——超實(shí)用,需要的朋友可以參考下2015-07-07
這篇文章介紹了jQuery操作CSS樣式的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
jQuery+PHP實(shí)現(xiàn)可編輯表格字段內(nèi)容并實(shí)時(shí)保存
在本例中，我們會(huì)通過jQuery實(shí)現(xiàn)單擊將一個(gè)文本信息變?yōu)榭删庉嫷谋韱?，你可以對文本?nèi)容進(jìn)行編輯，然后點(diǎn)擊“確定”按鈕，新的內(nèi)容將發(fā)送到后臺PHP程序處理，并保存到數(shù)據(jù)庫；當(dāng)點(diǎn)擊“取消”按鈕，則頁面恢復(fù)到初始狀態(tài)，需要的朋友可以參考下2015-10-10
輕松掌握jQuery中wrap()與unwrap()函數(shù)的用法
wrap()能夠?qū)⒅付℉TML元素包裹DOM結(jié)構(gòu),與之相反unwrap()函數(shù)則是將DOM去掉^^下面讓我們來以兩個(gè)小例子輕松掌握jQuery中wrap()與unwrap()函數(shù)的用法:)2016-05-05