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

朴灿烈づ我的快乐病毒、 2022-06-01 11:42 442阅读 0赞

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

一、前言

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

二、使用方法

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

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

2. HTML代码

3.JS代码

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

![SouthEast][]

![SouthEast 1][]

一共有50页，可以输入数字并跳转到那一页，有首页、末页、上页、下页这些按钮

对应回我上面的代码就会发现这些都是我设置的，怎么根据自己的需要来设置呢，就是这样的代码：

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

参数如下表：

options(参数配置)

<table style="color:rgb(0,0,0); font-family:&quot;Microsoft YaHei&quot;"> 
 <thead> 
  <tr> 
   <td>参数</td> 
   <td>默认值</td> 
   <td>说明</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>pageCount</td> 
   <td>9</td> 
   <td>总页数</td> 
  </tr> 
  <tr> 
   <td>totalData</td> 
   <td>0</td> 
   <td>数据总条数</td> 
  </tr> 
  <tr> 
   <td>current</td> 
   <td>1</td> 
   <td>当前第几页</td> 
  </tr> 
  <tr> 
   <td>showData</td> 
   <td>0</td> 
   <td>每页显示的条数</td> 
  </tr> 
  <tr> 
   <td>prevCls</td> 
   <td>'prev'</td> 
   <td>上一页class</td> 
  </tr> 
  <tr> 
   <td>nextCls</td> 
   <td>'next'</td> 
   <td>下一页class</td> 
  </tr> 
  <tr> 
   <td>prevContent</td> 
   <td>'&lt;'</td> 
   <td>上一页节点内容</td> 
  </tr> 
  <tr> 
   <td>nextContent</td> 
   <td>'&gt;'</td> 
   <td>下一页节点内容</td> 
  </tr> 
  <tr> 
   <td>activeCls</td> 
   <td>'active'</td> 
   <td>当前页选中状态class名</td> 
  </tr> 
  <tr> 
   <td>count</td> 
   <td>3</td> 
   <td>当前选中页前后页数</td> 
  </tr> 
  <tr> 
   <td>coping</td> 
   <td>false</td> 
   <td>是否开启首页和末页，值为boolean</td> 
  </tr> 
  <tr> 
   <td>isHide</td> 
   <td>false</td> 
   <td>总页数为0或1时隐藏分页控件</td> 
  </tr> 
  <tr> 
   <td>keepShowPN</td> 
   <td>false</td> 
   <td>是否一直显示上一页下一页</td> 
  </tr> 
  <tr> 
   <td>homePage</td> 
   <td>''</td> 
   <td>首页节点内容，默认为空</td> 
  </tr> 
  <tr> 
   <td>endPage</td> 
   <td>''</td> 
   <td>尾页节点内容，默认为空</td> 
  </tr> 
  <tr> 
   <td>jump</td> 
   <td>false</td> 
   <td>是否开启跳转到指定页数，值为boolean类型</td> 
  </tr> 
  <tr> 
   <td>jumpIptCls</td> 
   <td>'jump-ipt'</td> 
   <td>文本框内容</td> 
  </tr> 
  <tr> 
   <td>jumpBtnCls</td> 
   <td>'jump-btn'</td> 
   <td>跳转按钮class</td> 
  </tr> 
  <tr> 
   <td>jumpBtn</td> 
   <td>'跳转'</td> 
   <td>跳转按钮文本内容</td> 
  </tr> 
  <tr> 
   <td>callback</td> 
   <td>function(){}</td> 
   <td>回调函数，参数"index"为当前页</td> 
  </tr> 
 </tbody> 
</table>

下一步是怎么实现AJAX动态分页？

上面那个分页是写死的，现在我们要用Ajax动态加载数据进来，所以可以先把原来的注释掉，我们重新来写<script></script>里面的内容

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

![SouthEast 2][]

哈哈找到了！总页码就是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里面即可

以下是完整的实例：

最终的效果是这样：

![SouthEast 3][]  
![SouthEast 4][]

容易出错的地方：

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

currentPage:api.getCurrent()-1

参考文章：http://blog.csdn.net/baidu\_25343343/article/details/70478467

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

[SouthEast]: /images/20220601/6bd388df81fe4019ade4ac9a3e921abd.png
[SouthEast 1]: /images/20220601/017e1b760a404c9e9bac899fefeae67d.png
[SouthEast 2]: /images/20220601/0ce59b49b81944f7a9c9b2f25fe8004c.png
[SouthEast 3]: /images/20220601/e463f821182d4bfea2737797a37e98ad.png
[SouthEast 4]: /images/20220601/e25b08d5390243adad3e4641dd3b806c.png