ES6公用分頁組件的封裝及應用舉例

ES6公用分頁組件的封裝及應用舉例，以下源碼使用到JQuery、Sass，重要的是方法，不合適可以根據自己的需要改改。

分頁類

以下爲pagination.js源碼

import './pagination.scss'
import $ from '../../lib/jquery-3.3.1.min'
class Pagination {
    constructor () {
        this.defaultOption = {
            container       : null,
            pageNum         : 1,
            pageRange       : 2,
            onSelectPage    : null
        }
        this._bindEvent()
    }
    _bindEvent () {
        const that = this
        // 事件委託
        $(document).on('click', '.pg-item', function(){
            let $this = $(this)
            // 對於active和disabled按鈕點擊，不做處理
            if($this.hasClass('active') || $this.hasClass('disabled')){
                return
            }
            typeof that.option.onSelectPage === 'function' 
                ? that.option.onSelectPage($this.data('value')) : null
        })
    }
    // 渲染
    render (userOption) {
        // 合併選項
        this.option = $.extend({}, this.defaultOption, userOption)
        // 判斷容器是否爲合法的jquery對象
        if(!(this.option.container instanceof $)){
            return
        }
        // 判斷是否只有1頁
        if(this.option.pages <= 1){
            return
        }
        // 渲染分頁內容
        // alert(this.getPaginationHtml())
        this.option.container.html(this.getPaginationHtml())
    }
    // 獲取分頁的html, |上一頁| 2 3 4 =5= 6 7 8|下一頁|  5/9
    getPaginationHtml () {
        let html = '', pageArray = [],
            option = this.option,
            start = option.pageNum - option.pageRange > 0 ? option.pageNum - option.pageRange : 1,
            end = option.pageNum + option.pageRange < option.pages ? option.pageNum + option.pageRange : option.pages
        // 上一頁按鈕數據
        pageArray.push({
            name : '上一頁',
            value : this.option.prePage,
            disabled : !this.option.hasPreviousPage,
            previousBtn : true
        })
        // 數字按鈕處理
        for(let i = start; i <= end; i++){
            pageArray.push({
                name : i,
                value : i,
                active : (i === option.pageNum)
            })
        }
        // 下一頁按鈕數據
        pageArray.push({
            name : '下一頁',
            value : this.option.nextPage,
            disabled : !this.option.hasNextPage,
            nextBtn : true
        })

        for(let i = 0, iLength = pageArray.length; i < iLength; i++) {
            if(pageArray[i].disabled) {
                html += `
                    <span class="pg-item ${pageArray[i].previousBtn ? 'previous' : ''}${pageArray[i].nextBtn ? 'next' : ''} disabled" data-value="${pageArray[i].value}">${pageArray[i].name}</span>
            `} else {
                if (pageArray[i].active) {
                    html += `
                        <span class="pg-item active" data-value="${pageArray[i].value}">${pageArray[i].name}</span>
                `} else {
                    html += `
                    <span class="pg-item ${pageArray[i].previousBtn ? 'previous' : ''}${pageArray[i].nextBtn ? 'next' : ''} " data-value="${pageArray[i].value}">${pageArray[i].name}</span>
                `}
            }
        }
        html += `<span class="pg-total">共${option.pages}頁</span>`
        return html
    }
}
module.exports = Pagination

樣式

以下爲pagination.scss源碼

.pagination {
    text-align: center;
    color: #333;
    .pg-item{
        display: inline-block;
        height: 0.3rem;
        width: 0.3rem;
        line-height: 0.3rem;
        margin: 0 0.05rem;
        box-sizing: border-box;
        background: #728ab6;
        user-select : none;
        color: #fff;
        &.disabled {
            background: none;
            cursor: auto;
            color: #ddd;   
        }
        &.active {
            border: 1px solid #728ab6;
            background: none;
            cursor: auto;
            color: #728ab6;
        }
        &.previous, &.next {
            width: 0.8rem;
        }
    }
    .pg-total{
        margin-left: 10px;
        background: none;
        cursor: auto;
    }    
}

dom結構

應用舉例

以下爲use.js源碼:

import $ from './lib/jquery-3.3.1.min' // 引用JQuery
import service from './service/' // 導入接口
import Pagination from './util/pagination' // 導入分頁類
const use = {
    // 用於發送到後端請求數據，默認請求第一頁，四條數據
    pageInfo: {
        type : 'hot',
        page : 1, // 當前頁
        pageSize : 4 // 每頁顯示多少條
    },
    init () {
        this.loadWorks()
    },
    loadWorks () {
        const that = this
        // 請求數據
        service.getWorksList(this.pageInfo, function (res) {
            that.render(res)
            // 需要分頁的話，接口需要返回當前頁碼、總頁數/總條數（其他的可通過這兩個計算出來）
            const paginationParam = {
                hasPreviousPage : res.pageNum !== 1, // 是否有上一頁
                prePage : res.pageNum - 1, // 上一頁是哪頁
                hasNextPage : res.pageNum !== res.totalPages, // 是否有下一頁
                nextPage : res.pageNum + 1, // 下一頁是哪頁
                pageNum : res.pageNum, // 當前是第幾頁
                pages : res.totalPages // 一共多少頁
            }
            // 加載分頁信息
            that.loadPagination(paginationParam)
        }, function (err) {
            console.log(err)
        })
    },
    render () {
        // 渲染數據，此處略。
    },
    loadPagination (pageInfo) {
        const that = this
        this.pagination ? '' : (this.pagination = new Pagination());
        this.pagination.render($.extend({}, pageInfo, {
            container : $('.pagination'), // .pagination爲分頁容器的選擇器
            onSelectPage : function(pageNum){
                that.data.worksParam.page = pageNum;
                that.loadWorks()
            }
        }));
    }
}
use.init()

效果：