继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

kPagination纯js实现分页插件

拉丁的传说
关注TA
已关注
手记 590
粉丝 126
获赞 789

kPagination分页插件

纯js分页插件,压缩版本~4kb,样式可以自定义

demo

使用方法

<div id="pagination"></div><script src="kPagination.min.js"></script><script>
    new kPagination({
        id: 'pagination',
        currentPage: 1,         // 当前页
        totalPage: 20,
        offset: 5,
        showPrev: true,
        showNext: true,
        jumpPage: true,
        jumpText: '跳转'
    });</script>

配置项

选项类型说明
offsetnumber可以显示的按钮个数
showPrevboolean是否显示上一页按钮
showNextboolean是否显示下一页按钮
jumpPageboolean是否显示跳转输入框
jumpTextstring跳转按钮的文字
pageChangefunction页面触发回调
afterRefreshfunction重新渲染成功回调

可选样式

选项说明
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


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP