一、效果展示
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底部<body>标签前依次引入jquery、bootstrap.js或bootstrap.min.js(如果需要用到)、bootstrap-pagination-spirit.js(自定义分页插件)、最后添加加一个页面需要使用的JS文件(譬如我的js文件list.js)
3、在页面需要显示分页信息的地方定义一个分页div
<div class="spiritPagination"></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
扫一扫
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
