Jquery 分页插件，带你一步一步接入后台数据

谁践踏了优雅 2021-09-16 04:52 460阅读 0赞

**目录**

一、效果图

二、分页 js 源码讲解

三、分页样式 css 源码

三、实现前后台对接

--------------------

# 一、效果图 #

![70][]

# 二、分页 js 源码讲解 #

**新建一个 js 文件，基本直接复制粘贴就行，记得引入到需要的页面中。**

**需要注意的是：**

**前面的构造函数，是用来初始化前端分页的，在需要实现分页的页面的 js 文件中调用这个构造函数，进行分页的初始化。**

**后面的  JumpToPage(pageIndex); 函数，是用来实现页面跳转的，是在需要实现分页的页面的 js 文件中去实现这个函数。**

**到这里如果还不知道是什么意思，或者怎么实现的，没事！！！直接往下看。**

# 三、分页样式 css 源码 #

**新建一个 css 文件，直接复制粘贴就行。记得引入到需要的页面中。**

**如果对样式不满意，可以自己根据注释修改。**

* {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .fl {
      float: left;
    }
    .box {
      height: 30px;
      line-height: 30px;
      margin-top: 10px;;
      text-align: center;
    }
    /*设置“首页”“上一页”“下一页”“尾页”“跳转”5个按钮的样式*/
    .box button {
      padding: 0 10px;     
      color:#5A98DE;
      height: 30px;
      float: left;
      cursor: pointer;
      border: 1px solid #ebebeb;
      background-color: #ffffff;
    }
    .box .first-page,
    .box .last-page {
      margin: 0;
    }
    .box .pageWrap {    /*把多余的页码给隐藏起来*/
      height: 30px;
      float: left;
      overflow: hidden;
    }
    .box .pageWrap ul {
      width: 100000px;  /*设置数字按钮的滚动长度*/
      height: 30px;
      float: left;
    }
    
    /*设置数字按钮的样式*/
    .box .pageWrap ul li {
      width: 40px; /**/     
      height: 30px;
      border: 1px solid #ebebeb;
      line-height: 30px;
      box-sizing: border-box;
      cursor: pointer;
      float: left;
    }
    /*设置数字按钮被选中时候的按钮背景颜色*/
    .box .pageWrap ul .sel-page {
      background-color: #5A98DE;
    }
    /*设置跳转页数的文本框的样式*/
    .box .jump-text {
      width: 40px;
      height: 30px;
      box-sizing: border-box;
      text-align: center;
      float: left;
    }
    /*设置跳转按钮的样式*/
    .box .jump-button {
      margin: 0;
      float: left;
    }
    /*设置显示总页数和总条数的样式*/
    .box .total-pages,
    .box .total-count {
      margin-left: 10px;
      float: left;
      font-size: 14px;
    }

# 三、实现前后台对接 #

**1.在需要用到的页面引入上面的 js 代码和 css 代码。**

**2.在页面的 html 代码中的对应要显示分页的地方补上这句代码：**

**3.获取数据**

**后台通过 PageHelper 实现分页后将相关数据（包括需要显示的数据，总的条数，当前的页数等）传给前端，这时候前端就需要接收后台的数据，然后进行前端分页的初始化。**

**关于 PageHelper 后台分页，不会用的话，可以看下我的另外一篇博客：**

[Java 分页插件 PageHelper 的配置及使用][Java _ PageHelper]

**我前端选择使用 ajax 来接受数据（不懂的可以学一下，不难的 ）。**

**在需要分页的页面的 js 文件中，编写以下的代码：**

** 在需要分页的页面的 js 文件中，编写前端分页初始化的代码：**

**关于参数都已经打了注释，看以下就知道什么意思了。**

function paging(totalData,totalPage,pagenum){
        $('#box').paging({
            initPageNo: pagenum, // 初始页码
            totalPages: totalPage, //总页数
            totalCount: '合计' + totalData + '条数据', // 条目总数
            slideSpeed: 600, // 缓动速度 单位毫秒
            jump: true, //是否支持跳转
            callback: function(page) { 
                // 回调函数
             }
        });
    }

**前面提到的 JumpToPage(pageIndex) 函数，也需要在需要分页的页面的 js 文件中实现：**

function JumpToPage(pagenum){
    	loading(pagenum);
    }

**到这里，前端与后台，已对接了哦！**

**如果你还有什么疑问的话，可以在评论区提问，大家一起学习进步。**

[70]: /images/20210626/ac7e01ef19b84f979fbf749b9c3313da.png
[Java _ PageHelper]: https://blog.csdn.net/weidong_y/article/details/79700367