kPagination-純js實現分頁外掛

黃凱倫發表於2018-07-25
JS

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>
複製程式碼

配置項

選項 型別 說明
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可以反饋哈，我會第一時間修復

相關文章