使用pagination分页插件实现Ajax动态分页

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

一、前言

  做的一个列表页要将所有结果显示出来，太多记录不能一次性显示，所以要进行分页。一开始尝试自己写，但功能不完整（不会做太多页码的时候隐藏部分页码用省略号代替），于是找了这个插件来用。

二、使用方法

我们先来看看这款插件基本的使用方法：

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

2. HTML代码

3.JS代码

现在你可以看到这样的效果：

image

image

一共有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动态加载数据进来，所以可以先把原来的注释掉，我们重新来写里面的内容

待会需要用到的是总页码，去接口文档里面找找有没有：

哈哈找到了！总页码就是totalPages

如果没有总页码也没关系，看看有没有当前页的数据量和总的数据量，我们就可以将总页码算出来:
···
//获取总条数
var sumCount=data.totalElements;
//获取返回的条数
var count=data.numberOfElement;
···

···
//总页码（向上取整）
var pageCount=Math.ceil(sumCount/count);
···

现在就可以开始做动态分页了

先写一段JQ的Ajax，你懂的~把总页数输出一下看看有没有成功

···

···

在控制台可以看到有输出数据的话就可以进行下一步了，将你第一次写好的pagnation方法放到success里面，只不过pageCount的值原本是写死的50，现在是用Ajax来动态获取到的总页码

···

···
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里面即可

以下是完整的实例：

最终的效果是这样：

image

容易出错的地方：

页码是从0还是从1开始，一开始没有留意到这个细节导致初始显示第1页出来（第0页的数据没有了），而最后一页却是空白。所以要

currentPage:api.getCurrent()-1

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

(ps.我也是个初学者，第一次使用这个插件，如果有说的不对的地方请多多指教)