基于jquery 分页插件，前端分页、后端分页都可以 jquery.pagination.js

插件下载地址 百度网盘：

链接：https://pan.baidu.com/s/1jdngS08b_hqHEMixXOIa2g
提取码：1111
复制这段内容后打开百度网盘手机App，操作更方便哦

这里注意这个插件的版本以及看文档，我在网上一通百度结果用不了，原因使用方法变更了

1.引入插件

    
    "stylesheet" href="js/page/pagination.css" />
    

2.使用方法 添加两个div（样式自定义，这里的页码样式需要自己去写）

                            
class="htmlDiv row justify-content-center mt-30-reverse">
                            

                            
                            
"text-align: center" class="page-box cr-pagination">

我的页码样式

.cr-pagination a {
    background: transparent;
    display: inline-block;
    font-family: "Poppins", sans-serif;
    line-height: 33px;
    min-width: 35px;
    height: 35px;
    text-align: center;
    padding: 0;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    color: #454545;
    border: 1px solid #d1d1d1;
    border-radius: 100px;
    font-size: 13px;
}

.cr-pagination span {
    background: transparent;
    display: inline-block;
    font-family: "Poppins", sans-serif;
    line-height: 33px;
    min-width: 35px;
    height: 35px;
    text-align: center;
    padding: 0;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    color: #454545;
    border: 1px solid #d1d1d1;
    border-radius: 100px;
    font-size: 13px;
}

.cr-pagination .active{
    background: #00AC1F;
    border-color: #00AC1F;
    color: #ffffff;
}

3.编写js

在这里我后台用springboot+mybatis随便写了个分页接口 实现的后端分页

4.最后展示效果

5.总结：这个分页组件在不依赖于vue，react，angular 等主流框架，使用jquery开发网页还不错，主要是写官网用框架不利于seo 害。