pagination插件下載地址：https://pan.baidu.com/s/1c3QQ7XQ

一、前言

??????做的一個列表頁要將所有結果顯示出來，太多記錄不能一次性顯示，所以要進行分頁。一開始嘗試自己寫，但功能不完整（不會做太多頁碼的時候隱藏部分頁碼用省略號代替），于是找了這個插件來用。

?

二、使用方法

我們先來看看這款插件基本的使用方法：

1.先引入JQ和JS，引入CSS（樣式可以自行修改）

<script src="script/lib/jquery.min.js"></script> <script src="script/jquery.pagination.js"></script> <link rel="stylesheet" href="style/common.css"> <link rel="stylesheet" href="style/pagination.css"> 2. HTML代碼

<div class="M-box"></div>
3.JS代碼
<script> $(function () { $('.M-box').pagination({ pageCount:50, jump:true, coping:true, homePage:'首頁', endPage:'末頁', prevContent:'上頁', nextContent:'下頁' }); }) </script> 現在你可以看到這樣的效果：

?一共有50頁，可以輸入數字并跳轉到那一頁，有首頁、末頁、上頁、下頁這些按鈕

?對應回我上面的代碼就會發現這些都是我設置的，怎么根據自己的需要來設置呢，就是這樣的代碼：

$('.M-box').pagination({ //option //參數:值, //參數:值 })

參數如下表：

options(參數配置)

參數	默認值	說明
pageCount	9	總頁數
totalData	0	數據總條數
current	1	當前第幾頁
showData	0	每頁顯示的條數
prevCls	'prev'	上一頁class
nextCls	'next'	下一頁class
prevContent	'<'	上一頁節點內容
nextContent	'>'	下一頁節點內容
activeCls	'active'	當前頁選中狀態class名
count	3	當前選中頁前后頁數
coping	false	是否開啟首頁和末頁，值為boolean
isHide	false	總頁數為0或1時隱藏分頁控件
keepShowPN	false	是否一直顯示上一頁下一頁
homePage	''	首頁節點內容，默認為空
endPage	''	尾頁節點內容，默認為空
jump	false	是否開啟跳轉到指定頁數，值為boolean類型
jumpIptCls	'jump-ipt'	文本框內容
jumpBtnCls	'jump-btn'	跳轉按鈕class
jumpBtn	'跳轉'	跳轉按鈕文本內容
callback	function(){}	回調函數，參數"index"為當前頁

下一步是怎么實現AJAX動態分頁？

上面那個分頁是寫死的，現在我們要用Ajax動態加載數據進來，所以可以先把原來的注釋掉，我們重新來寫<script></script>里面的內容

待會需要用到的是總頁碼，去接口文檔里面找找有沒有：

哈哈找到了！總頁碼就是totalPages

如果沒有總頁碼也沒關系，看看有沒有當前頁的數據量和總的數據量，我們就可以將總頁碼算出來:

//獲取總條數 var sumCount=data.totalElements; //獲取返回的條數 var count=data.numberOfElement; //總頁碼（向上取整） var pageCount=Math.ceil(sumCount/count);

現在就可以開始做動態分頁了

先寫一段JQ的Ajax，你懂的~把總頁數輸出一下看看有沒有成功

<script>$(function () {$.ajax({url:'', //這里寫你的接口地址type:'POST',dataType: 'JSON',data:{},success:function(data){ //看能否成功返回數據，要根據接口文檔來修改名稱哦//總頁碼console.log(data.totalPages);}})})</script>

在控制臺可以看到有輸出數據的話就可以進行下一步了，將你第一次寫好的pagnation方法放到success里面，只不過pageCount的值原本是寫死的50，現在是用Ajax來動態獲取到的總頁碼

<script>$(function () {$.ajax({url:'',type:'POST',dataType: 'JSON',data:{},success:function(data){//返回條數console.log(data.numberOfElements);//總條數console.log(data.totalElements);//總頁碼console.log(data.totalPages);$('.M-box').pagination({pageCount:data.totalPages, //總頁碼coping:true, //是否開啟首頁和末頁homePage:'首頁',endPage:'末頁',prevContent:'上頁',nextContent:'下頁',current:1, //當前頁碼callback:function (api) { //這是一個回調函數}});}})})</script>

callback:function(api){

}

這是一個回調函數，即點擊分頁的數字按鈕時所執行的操作，回調函數中有一個參數叫api

api接口

方法? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?參數? ? ? ? ? ? ? ? ? ? ? ? ? 說明

getPageCount()? ? ? ? ? ? ? ? ?無? ? ? ? ? ? ? ? ? ? ? ?獲取總頁數

setPageCount(page)???? page：頁數? ? ? ? ? ? 設置總頁數

getCurrent()? ? ? ? ? ? ? ? ? ? ? 無? ? ? ? ? ? ? ? ? ? 獲取當前頁

filling()? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 無? ? ? ? ? ? ? ? ?填充數據，參數為頁數

??看不懂也沒關系，待會看例子就懂了。

首先我們要清楚原理，這個函數就是用來放點擊分頁數字按鈕以后要做什么的。因為沒有這個函數的時候，我們只獲取了第一頁的數據，那現在當我點其他頁的時候，就是要再次用Ajax去請求數據，點哪個數字就去獲取哪一頁的數據。那么我們就在callback:function(api){}這個函數里面這樣寫

callback:function (api) {$.ajax({url:'',type:'POST',data:{currentPage:api.getCurrent()-1 //這個方法就是用來獲取點擊了哪一頁的，因為我 //的接口文檔中頁數是從0開始的，所以減1，當我點擊第一頁的時候去獲取第0頁的數據},success:function (data) {console.log(data); //返回那一頁的數據}})}

現在你打開頁面去點擊一下頁碼，應該可以在控制臺看到那一頁的數據了?

至此，我們就會使用分頁插件來動態獲取數據了，剩下的就是將拿回來的數據放到頁面上，相信大家都懂的~寫在success里面即可

以下是完整的實例：

<script type="text/javascript">$(document).ready(function() {var url = "/getAllInformationHandler";$.ajax({url: url,type: 'POST',dataType: 'JSON',success: function(data) {var arr1=['盜','搶','丟','其他'];var arr2=['蘋果','三星','華為','小米','魅族','LG','索尼','OPPO','美圖','努比亞','360','中興','HTC','錘子','一加','酷派','黑莓','金立','諾基亞','其他'];for(var i=0;i<data.content.length;i++){function fn1() {if(data.content[i].photo!=""&&data.content[i].photo!=null){return `${data.content[i].photo}`;}else{return 'images/defPic.jpg';}}function fn2(){if(data.content[i].phoneVersion!=""&&data.content[i].phoneVersion!=null){return `${data.content[i].phoneVersion}`;}else{return '其他';}}$('.tbody').append(`<tr><td><div class="image"><a href="details.html?id=${data.content[i].id}"><img src="${fn1()}"></a></div></td><td>${arr1[data.content[i].nature]}</td><td>${data.content[i].repostNumber}</td><td class="phoneBrand"><span title="iPone">${arr2[data.content[i].phoneBrand]}</span></td><td>${fn2()}</td><td>${data.content[i].imei}</td><td>${data.content[i].characteristic}</td><td>${data.content[i].userName}</td><td>${data.content[i].phone}</td><td>${data.content[i].wechat}</td><td><a href="details.html?id=${data.content[i].id}">詳情</a></td></tr>`);}$('.M-box').pagination({pageCount:data.totalPages,coping:true,homePage:'首頁',endPage:'末頁',prevContent:'上頁',nextContent:'下頁',current:1,callback:function (api) {$.ajax({url:url,type:'POST',data:{currentPage:api.getCurrent()-1},success:function (data) {function fn1() {if(data.content[i].photo!=""&&data.content[i].photo!=null){return `${data.content[i].photo}`;}else{return 'images/defPic.jpg';}}function fn2(){if(data.content[i].phoneVersion!=""&&data.content[i].phoneVersion!=null){return `${data.content[i].phoneVersion}`;}else{return '其他';}}//console.log(data);$('.tbody').html(``);var arr1=['盜','搶','丟','其他'];var arr2=['蘋果','三星','華為','小米','魅族','LG','索尼','OPPO','美圖','努比亞','360','中興','HTC','錘子','一加','酷派','黑莓','金立','諾基亞','其他'];for(var i=0;i<data.content.length;i++){$('.tbody').append(`<tr><td><div class="image"><a href="details.html?id=${data.content[i].id}"><img src="${fn1()}"></a></div></td><td>${arr1[data.content[i].nature]}</td><td>${data.content[i].repostNumber}</td><td class="phoneBrand"><span title="iPone">${arr2[data.content[i].phoneBrand]}</span></td><td>${fn2()}</td><td>${data.content[i].imei}</td><td>${data.content[i].characteristic}</td><td>${data.content[i].userName}</td><td>${data.content[i].phone}</td><td>${data.content[i].wechat}</td><td><a href="details.html?id=${data.content[i].id}">詳情</a></td></tr>`);}},error:function () {alert("沒有找到對應結果！");}})}});},error:function () {alert("沒有找到對應結果！");}});});</script>

最終的效果是這樣：

容易出錯的地方：

頁碼是從0還是從1開始，一開始沒有留意到這個細節導致初始顯示第1頁出來（第0頁的數據沒有了），而最后一頁卻是空白。所以要

currentPage:api.getCurrent()-1

參考文章：http://blog.csdn.net/baidu_25343343/article/details/70478467

(ps.我也是個初學者，第一次使用這個插件，如果有說的不對的地方請多多指教)

總結

以上是生活随笔為你收集整理的使用pagination分页插件实现Ajax动态分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。