頂部導航開始 -->

jQuery實現分頁功能(含ajax請求、后臺數據、附完整demo)

這篇文章主要給大家介紹了關于jQuery實現分頁功能的相關資料,主要包含ajax請求和后臺數據,文末給出了完整的demo示例,對大家具有一定的參考價值,需要的朋友們下面來一起看看吧。

需求分析

  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實現一遍。

文件下載

pageAjax.zip

總結

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


自學php博客
請先登陸后發表評論
  • 最新評論
  • 總共0條評論
  • ? 2014-2016 zixuephp.cn 版權所有
  • ICP證:皖ICP備16012107號
  • 聯系郵箱:[email protected]
  • 交流請加微信:weibobf2899 或掃下方二維碼
双大床红利扑克1手APP