kPagination纯js实现分页插件
标签：
JavaScript
kPagination分页插件
纯js分页插件，压缩版本~4kb，样式可以自定义
demo
使用方法
<div id="pagination"></div><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="kPagination.min.js"></script><script>
new kPagination({
id: 'pagination',
currentPage: 1, // 当前页
totalPage: 20,
offset: 5,
showPrev: true,
showNext: true,
jumpPage: true,
jumpText: '跳转'
});</script>配置项
| 选项 | 类型 | 说明 |
|---|---|---|
| offset | number | 可以显示的按钮个数 |
| showPrev | boolean | 是否显示上一页按钮 |
| showNext | boolean | 是否显示下一页按钮 |
| jumpPage | boolean | 是否显示跳转输入框 |
| jumpText | string | 跳转按钮的文字 |
| pageChange | function | 页面触发回调 |
| afterRefresh | function | 重新渲染成功回调 |
可选样式
| 选项 | 说明 |
|---|---|
| k-pagination-num-wrap | 分页容器样式 |
| k-pagination-input-wrap | 按钮容器样式 |
| k-pagination-num | 页码样式 |
| k-pagination-num-active | 激活样式 |
| k-pagination-disabled | 禁止样式 |
| k-pagination-num-input | 输入框样式 |
| k-pagination-jump-btn | 跳转按钮样式 |
| k-pagination-jump-dot | 省略号样式 |
附上github地址，喜欢的朋友给个star吧，有bug可以反馈哈，我会第一时间修复
原文链接:https://segmentfault.com/a/1190000015759074
原文作者:kelen
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦