kPagination纯js完成分页插件

2023年1月16日 167次阅读 来源: kelen

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能够反应哈，我会第一时间修复

    原文作者：kelen
    原文地址: https://segmentfault.com/a/1190000015759074
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞