jQuery封装分页功能

封装目的

封装目的主要是实现与后台交互时，拿到json数据，对数据进行分页。功能的变量只有三个。一个是每页的数据量、json数据对象和开始显示第几页。

使用方式

使用者只需要改变json数据对象，确定每页的数据量，当前页数是第几页就可以了，样式使用者可以进行随意改变。

说明

分页的样式分为两种。一种是当数据量页数不大于4时，页面4页连同上一页与下一页按钮都显示出来。另一种是当数据量页数大于4时，页面数字按钮只显示前两页、当前页与上一页和下一页按钮。根据这两种情况分开来进行功能编译。

效果展示

具体代码实现

index.js
$(function () {
    //模拟数据
    let goods = [
        { id: 0, text: '羽绒服' },
        { id: 1, text: '棉被' },
        { id: 2, text: '棉被' },
        { id: 3, text: '棉被' },
        { id: 4, text: '棉被' },
        { id: 5, text: '棉被' },
        { id: 6, text: '棉被' },
        { id: 7, text: '棉被' },
        { id: 8, text: '棉被' },
        { id: 9, text: '棉被' },
        { id: 10, text: '棉被' },
        { id: 11, text: '棉被' },
        { id: 12, text: '棉被' },
        { id: 13, text: '棉被' }
    ]
    //分页功能
    let currentNum = 3;//每页数量
    let currentPage = 0;//当前页
    let countPages = (goods.length % currentNum) === 0 ? parseInt(goods.length / currentNum) : parseInt(goods.length / currentNum) + 1//计算总页数
    // 生成初始化分页按钮
    setPagesBtn(currentPage, countPages)
    //显示初始化页数
    showPages(currentPage, currentNum, goods, countPages)
    //点击数字按钮切换页数
    $('.pages .sort li').on('click', function (e) {
        currentPage = $(this).text() - 1
        if(currentPage<2){//当点击数字按钮时将当前页数的数字按钮删除
            $('.sort .next').prev('li').remove()
        }
        showPages(currentPage, currentNum, goods, countPages)
    })
    //上一页AND下一页
    $('.pages .sort p').on('click', function (e) {
        if ($(this).text() === '<上一页') {
            currentPage--;
            if (currentPage < 0) {
                currentPage = 0
            }
            if(currentPage+1>2&&currentPage<countPages){//当页数大于2时，显示当前页数数字按钮
                $('.sort .next').prev('li').remove()
                $('.sort .next').before(`<li class="currentPages">${currentPage+1}</li>`)
            }
            else{//当当前页数小于2时，将当前页数数字按钮删除
                $('.pages .sort .currentPages').remove()
            }
            showPages(currentPage, currentNum, goods, countPages)
        }
        if ($(this).text() === '下一页>') {
            currentPage++;
            if (currentPage > countPages - 1) {
                currentPage = countPages - 1
            }
            if(currentPage+1>2&&currentPage<countPages){//当页数大于2时，显示当前页数数字按钮
                $('.sort .next').prev('li').remove()
                $('.sort .next').before(`<li class="currentPages">${currentPage+1}</li>`)
            }
            else{//当当前页数小于2时，将当前页数数字按钮删除
                $('.pages .sort .currentPages').remove()
            }
            showPages(currentPage, currentNum, goods, countPages)
        }
    })
})