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

一、前言

??????做的一個(gè)列表頁(yè)要將所有結(jié)果顯示出來(lái)，太多記錄不能一次性顯示，所以要進(jìn)行分頁(yè)。一開始嘗試自己寫，但功能不完整（不會(huì)做太多頁(yè)碼的時(shí)候隱藏部分頁(yè)碼用省略號(hào)代替），于是找了這個(gè)插件來(lái)用。

?

二、使用方法

我們先來(lái)看看這款插件基本的使用方法：

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:'首頁(yè)', endPage:'末頁(yè)', prevContent:'上頁(yè)', nextContent:'下頁(yè)' }); }) </script> 現(xiàn)在你可以看到這樣的效果：

?一共有50頁(yè)，可以輸入數(shù)字并跳轉(zhuǎn)到那一頁(yè)，有首頁(yè)、末頁(yè)、上頁(yè)、下頁(yè)這些按鈕

?對(duì)應(yīng)回我上面的代碼就會(huì)發(fā)現(xiàn)這些都是我設(shè)置的，怎么根據(jù)自己的需要來(lái)設(shè)置呢，就是這樣的代碼：

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

參數(shù)如下表：

options(參數(shù)配置)

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

下一步是怎么實(shí)現(xiàn)AJAX動(dòng)態(tài)分頁(yè)？

上面那個(gè)分頁(yè)是寫死的，現(xiàn)在我們要用Ajax動(dòng)態(tài)加載數(shù)據(jù)進(jìn)來(lái)，所以可以先把原來(lái)的注釋掉，我們重新來(lái)寫<script></script>里面的內(nèi)容

待會(huì)需要用到的是總頁(yè)碼，去接口文檔里面找找有沒有：

哈哈找到了！總頁(yè)碼就是totalPages

如果沒有總頁(yè)碼也沒關(guān)系，看看有沒有當(dāng)前頁(yè)的數(shù)據(jù)量和總的數(shù)據(jù)量，我們就可以將總頁(yè)碼算出來(lái):

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

現(xiàn)在就可以開始做動(dòng)態(tài)分頁(yè)了

先寫一段JQ的Ajax，你懂的~把總頁(yè)數(shù)輸出一下看看有沒有成功

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

在控制臺(tái)可以看到有輸出數(shù)據(jù)的話就可以進(jìn)行下一步了，將你第一次寫好的pagnation方法放到success里面，只不過(guò)pageCount的值原本是寫死的50，現(xiàn)在是用Ajax來(lái)動(dòng)態(tài)獲取到的總頁(yè)碼

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

callback:function(api){

}

這是一個(gè)回調(diào)函數(shù)，即點(diǎn)擊分頁(yè)的數(shù)字按鈕時(shí)所執(zhí)行的操作，回調(diào)函數(shù)中有一個(gè)參數(shù)叫api

api接口

方法? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?參數(shù)? ? ? ? ? ? ? ? ? ? ? ? ? 說(shuō)明

getPageCount()? ? ? ? ? ? ? ? ?無(wú)? ? ? ? ? ? ? ? ? ? ? ?獲取總頁(yè)數(shù)

setPageCount(page)???? page：頁(yè)數(shù)? ? ? ? ? ? 設(shè)置總頁(yè)數(shù)

getCurrent()? ? ? ? ? ? ? ? ? ? ? 無(wú)? ? ? ? ? ? ? ? ? ? 獲取當(dāng)前頁(yè)

filling()? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 無(wú)? ? ? ? ? ? ? ? ?填充數(shù)據(jù)，參數(shù)為頁(yè)數(shù)

??看不懂也沒關(guān)系，待會(huì)看例子就懂了。

首先我們要清楚原理，這個(gè)函數(shù)就是用來(lái)放點(diǎn)擊分頁(yè)數(shù)字按鈕以后要做什么的。因?yàn)闆]有這個(gè)函數(shù)的時(shí)候，我們只獲取了第一頁(yè)的數(shù)據(jù)，那現(xiàn)在當(dāng)我點(diǎn)其他頁(yè)的時(shí)候，就是要再次用Ajax去請(qǐng)求數(shù)據(jù)，點(diǎn)哪個(gè)數(shù)字就去獲取哪一頁(yè)的數(shù)據(jù)。那么我們就在callback:function(api){}這個(gè)函數(shù)里面這樣寫

callback:function (api) {$.ajax({url:'',type:'POST',data:{currentPage:api.getCurrent()-1 //這個(gè)方法就是用來(lái)獲取點(diǎn)擊了哪一頁(yè)的，因?yàn)槲? //的接口文檔中頁(yè)數(shù)是從0開始的，所以減1，當(dāng)我點(diǎn)擊第一頁(yè)的時(shí)候去獲取第0頁(yè)的數(shù)據(jù)},success:function (data) {console.log(data); //返回那一頁(yè)的數(shù)據(jù)}})}

現(xiàn)在你打開頁(yè)面去點(diǎn)擊一下頁(yè)碼，應(yīng)該可以在控制臺(tái)看到那一頁(yè)的數(shù)據(jù)了?

至此，我們就會(huì)使用分頁(yè)插件來(lái)動(dòng)態(tài)獲取數(shù)據(jù)了，剩下的就是將拿回來(lái)的數(shù)據(jù)放到頁(yè)面上，相信大家都懂的~寫在success里面即可

以下是完整的實(shí)例：

<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:'首頁(yè)',endPage:'末頁(yè)',prevContent:'上頁(yè)',nextContent:'下頁(yè)',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("沒有找到對(duì)應(yīng)結(jié)果！");}})}});},error:function () {alert("沒有找到對(duì)應(yīng)結(jié)果！");}});});</script>

最終的效果是這樣：

容易出錯(cuò)的地方：

頁(yè)碼是從0還是從1開始，一開始沒有留意到這個(gè)細(xì)節(jié)導(dǎo)致初始顯示第1頁(yè)出來(lái)（第0頁(yè)的數(shù)據(jù)沒有了），而最后一頁(yè)卻是空白。所以要

currentPage:api.getCurrent()-1

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

(ps.我也是個(gè)初學(xué)者，第一次使用這個(gè)插件，如果有說(shuō)的不對(duì)的地方請(qǐng)多多指教)

總結(jié)

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

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