基于jq的简单分页插件

 具体代码如下

/**
 * 
 * @param {*} opt 
 * current:当前页数 默认0
 * tbody:表格主体 传元素
 * letters：全部数据[]
 * pageSize:每页数目
 * pages:传分页容器
 * showFun:函数参数item为letters切割后的数组，格式相同，用来展示当前页的数据，需要返回拼接后的字符串
 */
let pagesDir = function (opt) {
    class Page {
        constructor(data) {
            this.default = {
                current: 0
            }

            $.extend(this.default, data)
        }
        init() {
            let pages = this.default.pages
            let current = this.default.current;
            let tbody = this.default.tbody
            let letterList = pageFun(this.default.letters, this.default.pageSize)
            let showFun = this.default.showFun
            let nowArr = letterList[current]
            showDate(nowArr, showFun)
            pageBox(letterList, pages)
            pages.children('.conlist').eq(current).addClass('jp-current')
            disabled(pages, letterList.length, current)
            pages.on('click', '.conlist', function () {
                $(this).addClass('jp-current')
                $(this).siblings().removeClass('jp-current')
                current = Number($(this).attr('data-index'))
                // console.log($(this));
                showDate(letterList[current], showFun)
                disabled(pages, letterList.length, current)
            })

            pages.children('.first,.last').on('click', function () {
                if (!$(this).hasClass('jp-disabled')) {
                    current = Number($(this).attr('data-index'))
                    pages.children().removeClass('jp-current')
                    pages.children('.conlist').eq(current).addClass('jp-current')
                    showDate(letterList[current], showFun)
                    disabled(pages, letterList.length, current)
                }
            })

            pages.children('.jp-previous').on('click', function () {
                if (!$(this).hasClass('jp-disabled')) {

                    current = current - 1
                    pages.children().removeClass('jp-current')
                    pages.children('.conlist').eq(current).addClass('jp-current')
                    showDate(letterList[current], showFun)
                    disabled(pages, letterList.length, current)
                }
            })
            pages.children('.jp-next').on('click', function () {
                if (!$(this).hasClass('jp-disabled')) {
                    current = current + 1
                    pages.children().removeClass('jp-current')
                    pages.children('.conlist').eq(current).addClass('jp-current')
                    showDate(letterList[current], showFun)
                    disabled(pages, letterList.length, current)
                }
            })
            // 判断首页，上一页，下一页，尾页是否要变暗
            function disabled(pages, length, current) {
                let first = pages.children('.first')
                let last = pages.children('.last')
                let previous = pages.children('.jp-previous')
                let next = pages.children('.jp-next')
                length = length - 1
                if (current === 0) {
                    first.addClass('jp-disabled')
                    previous.addClass('jp-disabled')
                    next.removeClass('jp-disabled')
                    last.removeClass('jp-disabled')
                } else if (current > 0 && current < length) {
                    first.removeClass('jp-disabled')
                    previous.removeClass('jp-disabled')
                    next.removeClass('jp-disabled')
                    last.removeClass('jp-disabled')
                } else {
                    next.addClass('jp-disabled')
                    last.addClass('jp-disabled')
                    first.removeClass('jp-disabled')
                    previous.removeClass('jp-disabled')
                }
            }

            // 封装分页盒子
            function pageBox(letterList, pages) {
                let lastN = letterList.length - 1
                pages.append('<a class="first" data-index="0">首页</a><a class="jp-previous">上一页</a>')
                letterList.forEach((item, i) => {
                    let eles = `<a data-index=${i} class="conlist">${i + 1}</a>`
                    pages.append(eles)
                })
                pages.append(`<a class="jp-next">下一页</a><a class="last" data-index=${lastN}>尾页</a>`)
            }


            function showDate(lettersItem, showFun) {

                tbody.html(showFun(lettersItem))
            }

            // 数组拆分
            function pageFun(arr, size) {
                let newarr = [];
                while (arr.length) {
                    newarr.push(arr.splice(0, size))
                    // console.log(arr);
                }
                return newarr;
            }
        }
    }

    let tem = new Page(opt)
    tem.init();


}

 调用

let tbody = $('tbody')
let pages = $('.pages')
let letters = ListtoArr()
let current = 0
pagesDir({
    current,
    tbody,
    letters,
    pageSize: 9,
    pages,
    showFun: function (lettersItem) {
        let htmlStr = ``
        lettersItem.forEach((item) => {
            let usertype = ''
            if (item.userType == 1) {
                usertype = '业务咨询'
            } else {
                usertype = '认证咨询'
            }
            htmlStr += `
                <tr>
                <td><a href="./detail.html?id=${item.letterId}" title=${item.title}>${item.title}</a></td>
                <td>${usertype}</td>
                <td>${item.sender}</td>
                <td style="color:#e76054;">${item.status}</td>
                <td>${item.lastTime}</td>
                </tr>
            `
        })

        return htmlStr
    }


})

由于一开始是用jpage写的，css样式基本没改

.pages {
    margin: 25px 0;
    text-align: center;
}

.pages a {
    font-size: 12px;
    cursor: pointer;
    margin: 0 5px;
    color: #226ebc;
    border: 1px solid #e5e5e5;
    padding: 5px 8px;
}

.pages a:hover {
    background-color: #226ebc;
    color: #fff;
}

.pages a.jp-previous {
    margin-right: 5px;
}

.pages a.jp-next {
    margin-left: 5px;
}

.pages a.jp-current,
a.jp-current:hover {
    color: #fff;
    font-weight: bold;
    background-color: #226ebc !important;

}

.pages a.jp-disabled,
a.jp-disabled:hover {
    color: #bbb;
}

.pages a.jp-current,
a.jp-current:hover,
.holder a.jp-disabled,
a.jp-disabled:hover {
    cursor: default;
    background: none;
}

 

效果 

 

 

类的命名参考jPage，一开始用jpage插件做分页，突然就想要自己写一个哈哈哈哈哈，命名很不规范，来这里记录一下。