根据最新bootstrap4.0，自定义高颜值分页插件

一、效果展示

1、只有一页时，默认不显示分页信息，只显示详情

2、小于等于7页时

3、大于7页时 

二、素材依赖

1、bootstrap 4.0，官网就能找到最新素材下载，这里提供一个Bootstrap4 中文文档

2、Jquery，首先bootstrap的脚本就需要它，其次，我们自定义的分页插件也需要

3、自定义的分页插件，在文章底部获取(同时提供上面两个素材)

三、如何使用

1、在HTML页面顶部引入bootstrap的css样式：bootstrap.css或bootstrap.min.css

2、在HTML底部标签前依次引入jquery、bootstrap.js或bootstrap.min.js(如果需要用到)、bootstrap-pagination-spirit.js(自定义分页插件)、最后添加加一个页面需要使用的JS文件(譬如我的js文件list.js)

3、在页面需要显示分页信息的地方定义一个分页div

4、在页面js文件中初始化分页信息，这里需要后端返回JsonObject对象

initSpiritPagination(total, pages, limit)

页面第一次加载和搜索时，都需要初始化分页信息(因为总条数等相关信息会变动)

5、在页面js文件中新增一个函数

updateViewInfo(pages, limit)

当我们点击页码时，分页信息会更新，并通过这个函数返回当前页码等信息

注意：搜索框的内容，应该在页面js函数中保留下来，这样，在点击页码分页时，就能正确获取，并且不会出错！

6、点击页码更新分页信息的时候，总条数信息并没有变化，不再需要初始化分页信息，只需更新表格内容，譬如我调用updateViewInfo里的updateDeclareTemp(param)内容如下：

补充：

1、分页信息不会往左边浮动，添加如下css属性

.pull-right{
    float: right;
}

2、页码点击后，会出现蓝色外框，添加如下css属性

.page-link:focus{
    box-shadow: none;
}

 

四、素材下载

链接:https://pan.baidu.com/s/1WS2PtwTzyeIbnA0IAWxKEw  密码:sfmw

插件是自己很短的时间内写完的，有不足的地方，可以指出

同时也欢迎小伙伴们进入QQ群交流：654331206