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

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">

HTML代码

<div class="M-box"></div>

3.JS代码

<script>  
    $(function () {  
        $('.M-box').pagination({  
            pageCount:50,  
            jump:true,  
            coping:true,  
            homePage:'首页',  
            endPage:'末页',  
            prevContent:'上页',  
            nextContent:'下页'  
        });  
    })  
  
</script>

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

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

最终的效果是这样：

image

容易出错的地方：

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

currentPage:api.getCurrent()-1

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

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

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

推荐阅读更多精彩内容