JS 怎么控制页面序号较智能的生成？

当前页面号（2或3）靠近第一个页面的时候，转变成像这样子
1 2 3 4 5 ... 10

当前页面号（7）远离第一个页面且远离最后一个页面的时候，转变成像这样子
1 ... 6 7 8 ... 10

当前页面号（8或9）接近最大页面数量的时候，又转变成这样子
1 ... 7 8 9 10

可能之前描述不清楚，更新一下问题。

javascript

html5

阅读 4.2k

3 个回答

0xnone

✓ 已被采纳

阿西吧、刚刚在更新问题的时候突然想到了写法、我分享一下

可能出现情况是这样子的
max 为最大页面号
current为当前页面号
1 2 3 4 5 6 7(max <= 7)
1 ... 4 5 6 7 8(current >= max-2)
1 2 3 4 5 ... 8(current <= 3)
1 2 3 4 5 ... 9(current <= 3)
1 ... 4 5 6 ... 9(current > 3)

按钮总数固定为7个（包括...）
分析了一下我的页号生成函数应该这样写、请无视我的代码水平
make_page_number 为生成页面序列的函数
make_array_number 打酱油的函数
返回结果为数组，根据数组生成页面按钮即可
生成结果数组中 -1 代表 ...

function make_page_number(current_page, max_page_number) {
    let page_index_list = []
    let page_index
    if (max_page_number <= 8) {
        page_index_list = page_index_list.concat(make_array_number(1, max_page_number))
    } else if (current_page >= max_page_number - 2) {
        page_index_list = [1, -1]
        page_index_list = page_index_list.concat(make_array_number(max_page_number - 4, max_page_number))
    } else if (current_page <= 3) {
        page_index_list = page_index_list.concat(make_array_number(1, 5))
        page_index_list = page_index_list.concat([-1, max_page_number])
    } else {
        page_index_list = [1, -1]
        page_index_list = page_index_list.concat(make_array_number(current_page - 1, current_page + 1))
        page_index_list = page_index_list.concat([-1, max_page_number])
    }
    return page_index_list
}

function make_array_number(min, max) {
    let array_number = []
    let index = min
    while(index <= max) {
        array_number.push(index)
        index += 1
    }
    return array_number
}

经过一个for循环添加元素结果如下

谢谢回答了我问题的两位大佬给了我思路

以下为更新答案：

针对这个问题，我今天抽时间封装了一个工具：暂且称其为分页驱动吧，随便写写也有200行代码。

分页主要面临的问题，除了显示之后，还要考虑当前页的获取、当前url的参数不能丢失等等

可以看看我封装的效果，同时提供了诸多的配置选项。主要的思想来自thinkphp5的分页驱动

地址：http://postbird.oschina.io/po...

以下为原答案：

控制分页很多时候需要考虑很多情况，根据你想要的，我只是简单了写个demo，这个demo能够完整一些工作，但是本身会存在一些问题，关键就是判断如何显示，间隔多大。

https://jsfiddle.net/p0t1voad/

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .pagination {
            display: inline-block;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd;
            position: relative;
            padding: 6px 12px;
            cursor: pointer;
        }

        .pagination>a {
            text-decoration: none;
            color: darkcyan
        }
    </style>
</head>

<body>
    <h1>APPcache</h1>
</body>

<script>
    var pageIndex = {
        total: 1,
        now: 1,
        space: 1,
        min: 5,
        url: 'http://url.com?page=',
        urlList: [],
        init: function (param) {
            this.total = param.total || this.total;
            this.now = param.now || this.now;
            this.space = param.space || this.space;
            this.min = param.min || this.min;
            this.url = param.url || this.url;
            return this.work();
        },
        work: function () {
            var resArr = [];
            if (this.total <= this.min) {
                for (var i = 1; i <= this.total; i++) {
                    this.urlList.push(this.getHtml(this.url + '' + i, i, true));
                }
            } else {
                for (var i = 1; i <= 1 + this.space; i++) {
                    this.urlList.push(this.getHtml(this.url + '' + i, i, true));
                }
                var dec = this.now - this.space;
                if (dec > 1 + this.space) {
                    this.urlList.push(this.getHtml('...', '...', false));
                    var sum = this.now + this.space;
                    if (sum < this.total - this.space) {
                        for (var i = dec; i <= sum; i++) {
                            this.urlList.push(this.getHtml(this.url + '' + i, i, true));
                        }
                    }
                }
                this.urlList.push(this.getHtml('...', '...', false));
                for (var i = this.total - this.space; i <= this.total; i++) {
                    this.urlList.push(this.getHtml(this.url + '' + i, i, true));
                }
            }
            return this.urlList;
        },
        getHtml: function (link, text, flag) {
            if (flag) {
                return '<li class="pagination"><a href=' + link + '>' + text + '</a></li>'
            } else {
                return '<li class="pagination"><a href="javascript:void(0);">' + text + '</a></li>'
            }
        },
        show: function (sel) {
            var dom = document.querySelector(sel);
            if (!dom) {
                return false;
            }
            var htm = '';
            this.urlList.forEach(function (item) {
                htm += item;
            });
            dom.innerHTML = htm;
        }
    }
    var config = {
        url: location.pathname + "?page=", // 基础的url
        space: 1, // 间隔  表示当前页左右的位移显示
        total: 17, // 总数 
        now: 8, // 当前页数 
        min: 10 // 最小显示 小于等于10 会完全展开
    };
    pageIndex.init(config);
    pageIndex.show("body");

</script>

</html>