快速实现-简单的分页器

首先形形色色的分页器大家肯定都看过，这一次就快速实现一个简单的分页器，应该不会耽搁太久吧~

先来看一下简洁布局：

image.png

瞜一眼这布局：

1. 页码数量总共只有9个
2. 当足够显示所有页码的情况就全部显示了

那么问题来了，如果不够呢？

1. 第一种情况

   
   image.png

2. 第二种情况

   
   image.png

3. 第三种情况

   
   image.png

正点：

1. 总共只能显示九个页码
2. 当不够的是则显示省略号
3. 最主要的是省略号的位置，而省略号的位置由取决于当前页码处于哪里
   3.1 当前页码接近首页时， 则小于等于 7， 省略号靠近尾页
   3.2 当前页码接近尾页时，则大于等于尾页 - 7，省略号靠近首页
   3.3 当以上不成立的时候，首尾两边都有省略号
4. 必须凑足九个页码

function pageView(total, cur) {
        var pageNum = [];
        // 小于九个页码，开开心心
        if (total <= 9) {
            for (var i = 0; i < total; i++) {
                pageNum.push(i + 1);
            }
            
        } else {
            // 超出九个页码另当别论

            if (cur <= 7) {
                // 前面显示的页码
                for (var i = 0; i < 7; i++) {
                    pageNum.push(i + 1);
                }
                // 补齐页码
                pageNum.push('...', total);
            } else if (cur >= total - 7) {
                // 后面显示的页码
                for (var i = 0; i < 7; i++) {
                    pageNum.unshift(total - i);
                }
                // 补齐页码
                pageNum.unshift(1, '...');
            } else {
                // 凑足九个页码
                pageNum = [1, '...', cur - 2, cur - 1, cur, cur + 1, cur + 2, '...', total];
            }
        }

        return pageNum;
    }

打印效果

    // 刚刚好，万事大吉
    var total = 9;
    var cur = 1;
    console.log(pageView(total, cur)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

    // 当前页码靠近首页
    total = 100;
    cur = 1;
    console.log(pageView(total, cur)); // [1, 2, 3, 4, 5, 6, 7, "...", 100]

    // 当前页码靠近尾页
    total = 100;
    cur = 99;
    console.log(pageView(total, cur)); // [1, "...", 94, 95, 96, 97, 98, 99, 100]

    // 当前页码靠中间
    total = 100;
    cur = 50;
    console.log(pageView(total, cur)); // [1, "...", 48, 49, 50, 51, 52, "...", 100]

image.png

事情并没有那么简单~

上面的7应该是活的，（cur - 2, cur - 1, cur, cur + 1, cur + 2）也应该是活的，因为页码不可能就用于是九个，哪天我就想要一个能显示15个页码的呢？很简单，改造一下

1. 当前页j接近于左右某一端 : 用可显示页码的个数 - 2
   原因： 首页，尾页总得占一个，再加上一个省略号

2. 情况居于中间: (用可显示页码的个数 - 5）/ 2；
   原因：首页，尾页， 两个省略号，一个当前页，然后除于2，是因为当前页左右两边平均分

function pageView(total, cur, pagesLen) {
        var pageNum = [];
        // 小于九个页码，开开心心
        if (total <= pagesLen) {
            for (var i = 0; i < total; i++) {
                pageNum.push(i + 1);
            }
            
        } else {
            // 超出九个页码另当别论
            var max = pagesLen - 2; // 首|尾 + ...

            if (cur <= max) {
                // 前面显示的页码
                for (var i = 0; i < max; i++) {
                    pageNum.push(i + 1);
                }
                // 补齐页码
                pageNum.push('...', total);
            } else if (cur >= total - max) {
                // 后面显示的页码
                for (var i = 0; i < max; i++) {
                    pageNum.unshift(total - i);
                }
                // 补齐页码
                pageNum.unshift(1, '...');
            } else {

                // 凑足pagesLen个页码
                var around = (pagesLen - 5) / 2;
                // 当前页左右两边的页码
                var leftArr = [];
                var rightArr = [];

                for (var i = 1; i <= around; i++) {
                    leftArr.unshift(cur - i);
                    rightArr.push(cur + i);
                }

                // 凑页码
                pageNum = leftArr.concat(cur, rightArr);
                pageNum.push('...', total);
                pageNum.unshift(1, '...');
            }
        }

        return pageNum;
    }

效果

    // 页码多于total
    var total = 9;
    var cur = 1;
    var pagesLen = 15;
    console.log(pageView(total, cur, pagesLen)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

    // 当前页码靠近首页
    total = 100;
    cur = 1;
    pagesLen = 15;
    console.log(pageView(total, cur, pagesLen)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, "...", 100]

    // 当前页码靠近尾页
    total = 100;
    cur = 99;
    pagesLen = 15;
    console.log(pageView(total, cur, pagesLen)); // [1, "...", 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]

    // 当前页码靠中间
    total = 100;
    cur = 50;
    pagesLen = 15;
    console.log(pageView(total, cur, pagesLen)); // [1, "...", 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, "...", 100]