快速实现-简单分页器(下)

上一节的分页器只能实现简单的效果，是无法点击到中间页码的

第一节实现的效果.gif

这一节，我们需要稍微改造一下

考虑问题：

1. 当点击到5， 6， 7的时候页码应该是活动的，并且页码向后移动

2. 这时应该出现两边都有省略号

   
   第一种情况.gif

So

1. 我们完全可以将上一节左右两边都有省略号的情况抠出来，作为函数around

2. 在首页情况下的时候，做一次判断，判断当前页码 离首页 间隔有一定数量的时候，使其变为两边都有省略号的效果

3. 在尾页情况下的时候，也同上

   
   1.gif

4. 抠出两边都有省略号的情况

/**
 * 两边都有省略号
 * @param {*} total 总页数
 * @param {*} pagesLen 页码个数
 * @param {*} cur 当前页码
 */
function around(total, pagesLen, cur) {
    let pagesNum = [];
    let side = (pagesLen - 5) / 2;
    // 左边的数组
    let leftArr = [],
    // 右边的数组
        rightArr = [];

    // 左右两边都匀称
    for (var i = 1; i <= side; i++) {
        leftArr.unshift(cur - i);
        rightArr.push(cur + i);
    }
    // 考虑一下 如何不能整除，我们可以视情况而定，添加一个在左边，或者右边
    pagesNum = (pagesLen - 5) % 2 === 0 ? [1, '...'].concat(leftArr, cur, rightArr, '...', total) : [1, '...'].concat(cur - Math.ceil(side), leftArr, cur, rightArr, '...', total);
    return pagesNum;
}

第二步： 给 首页及尾页显示的情况再加一层判断

/**
 * 
 * @param {*} total 总页数
 * @param {*} pagesLen 页码个数
 * @param {*} cur 当前页码
 */
function drawPage(total, pagesLen, cur) {
    // 可显示页码数 =  页码个数 - (首页|尾页 + 一个省略号)
    var temp = pagesLen - 2;

    // 显示页码数组
    let pagesNum = [];

    // 如果total总数小于页码个数，我们就采用total总数
    if (total <= pagesLen) {
        for (var i = 0; i < total; i++) {
            pagesNum.push(i + 1);
        }
    } else {
        // 如果total大于页码总数,则需要分为三种情况

        // 1、 第一种，当前页码是否小于 temp (temp为 页码数 - 2)
        if (cur <= temp) {
            // 当前页码离首页稍近的时候，尾部显示省略号
            if (cur <= temp - Math.ceil(temp / 2)) {
                for (var i = 0; i < temp; i++) {
                    pagesNum.push(i + 1);
                }
                pagesNum.push('...', total);
            } else {
                // 当前页码离首页较远的时候，出现两边省略号
                pagesNum = around(total, pagesLen, cur);
            }

            // 2. 第二种，当前页码是否大于 总数 - temp,
        } else if (cur >= total - temp) {
            // 当前页码离尾页稍近的时候，首部显示省略号
            if (cur >= total - Math.floor(temp / 2)) {
                for (var i = 0; i < temp; i++) {
                    pagesNum.unshift(total - i);
                }
                pagesNum.unshift(1, '...')
            } else {
                // 当前页码离尾页页较远的时候，出现两边省略号
                pagesNum = around(total, pagesLen, cur);
            }

        } else {
            // 如果以上情况不成立，则显示两个省略号
            pagesNum = around(total, pagesLen, cur);
        }
    }
    return pagesNum;
}

效果：

console.log(drawPage(100, 9 ,1)); // [ 1, 2, 3, 4, 5, 6, 7, '...', 100 ]
console.log(drawPage(100, 9 ,7)); // [ 1, '...', 5, 6, 7, 8, 9, '...', 100 ]

console.log(drawPage(100, 9 ,97)); // [ 1, '...', 94, 95, 96, 97, 98, 99, 100 ]
console.log(drawPage(100, 9 ,94)); // [ 1, '...', 92, 93, 94, 95, 96, '...', 100 ]

console.log(drawPage(100, 9 ,50)); // [ 1, '...', 48, 49, 50, 51, 52, '...', 100 ]

页面上测试
JS：

var pages = document.getElementById('pages');
// 页码的个数：比如9
var pagesSum = pages.children.length;
// 模拟数据： 页码总数： 比如100
var pageTotal = 100;


// 点击事件
pages.onclick = function (e) {
    var tar = e.target;
    if (tar.nodeName === 'LI') {
        let numTxt = tar.innerText;
        // 如果是... 就直接返回
        if (numTxt === '...') return;

        // 改变页码
        changePage(pageTotal, pagesSum, numTxt * 1);
        // 给对应的页码加上高亮
        for (var i = 0; i < pages.children.length; i++) {
            pages.children[i].className = pages.children[i].innerText === numTxt ? 'current' : '';
        }
    }
}


// 默认改变一次
changePage(pageTotal, pagesSum, 1);

// 改变页码
function changePage(total, pagesLen, cur) {
    // 生成页码
    let nums = drawPage(total, pagesLen, cur);
    for (var i = 0; i < pages.children.length; i++) {
        // 将页码绘制对应位置上
        pages.children[i].innerText = nums[i];
    }
}

        <div class="page-container">
            <span id="prev-page">上一页</span>
            <ul id="pages">
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
            </ul>
            <span id="next-page">下一页</span>
        </div>

CSS

 <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .page-container {
            width: 480px;
            height: 30px;
            line-height: 30px;
            margin: 100px auto;
            border: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
        }

        .page-container>span {
            padding: 0 10px;
        }

        .page-container>ul {
            flex: 1;
            display: flex;

        }

        .page-container>ul>li {
            flex: 1;
            text-align: center;
            border-right: 1px solid #ccc;
            cursor: pointer;
        }

        .page-container>ul>li.current {
            color: orange;
        }

        .page-container>ul>li:first-child {
            border-left: 1px solid #ccc;
        }
    </style>