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">
<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.我也是个初学者，第一次使用这个插件，如果有说的不对的地方请多多指教)
