使用纯javascript进行分页的点答案

【问题标题】：dots with-in pagination using pure javascript使用纯javascript进行分页的点
【发布时间】：2019-08-04 16:52:55
【问题描述】：

在使用纯 javascript 实现分页时，我需要一点帮助。

我们为此编写了这个函数，它还将为我提供在 FE 中呈现的分页选项的选项。

paginateData: function (items, page, per_page) {

        var page = page || 1,
            per_page = per_page || 25,
            offset = (page - 1) * per_page,

            paginatedItems = items.slice(offset).slice(0, per_page),
            total_pages = Math.ceil(items.length / per_page),
            pageList = new Set(),
            ix = 0;
        for (var i = page; i <= total_pages; i++) {

            if (ix < 3 || ix === (total_pages-page)) {
                pageList.add(i.toString());
            } else {
                pageList.add("...");
            }
            ix++;
        }
        return {
            page: page,
            per_page: per_page,
            pre_page: page - 1 ? page - 1 : null,
            next_page: (total_pages > page) ? page + 1 : null,
            total: items.length,
            total_pages: total_pages,
            data: paginatedItems,
            pageOptions: pageList,
        };
    }

对于给定的场景，我需要输出 pageOptions 如下：

a) 总页数为 10，页数为 1： [“1”、“2”、“3”、“...”、“10”]

b) 总页数为 10，页数为 2： [“1”、“2”、“3”、“...”、“10”]

c) 总页数为 10，页数为 3： [“1”、“2”、“3”、“...”、“10”]

d) 总页数为 10，页数为 4： [“1”、“2”、“3”、“4”、“...”、“10”]

e) 总页数为 10，页数为 5： [“1”、“...”、“4”、“5”、“6”、“...”、“10”]

f) 总页数为 10，页数为 6： [“1”、“...”、“5”、“6”、“7”、“...”、“10”]

g) 总页数为 10，页数为 7： [“1”、“...”、“6”、“7”、“8”、“9”、“10”]

h) 总页数为 10，页数为 8： [“1”、“...”、“7”、“8”、“9”、“10”]

i) 总页数为 10，页数为 9： ["1", "...", "8", "9", "10"]

j) 总页数为 10，页数为 10： ["1", "...", "8", "9", "10"]

【问题讨论】：

能提供选页1到9的所有场景吗？将有助于更好地帮助您。
总页数为 9，页数为 1：["1", "2", "3", "...", "9"] - 它正在工作。总页数为 9，页数为 2：["2", "3", "4", "...", "9"] - 它正在工作。
您的所有场景仍然不清楚。例如，如果页面是 5，它应该是 [1, ..., 4, 5, 6, ..., 9] 还是 [1, ..., 5, 6, 7, 8, 9]。同样，如果 page 为 3，你想要 [1, 2, 3, 4, ..., 9] 还是 [3, 4, 5, ..., 9]？所有这一切只有在页面为 1 到 9 时向我们提供所有所需输出的列表时才会清楚。
添加了不同场景所需的所有输出

标签： javascript pagination

【解决方案1】：

这应该适合你。

//When first or second page is selected
if(page <= 2){
    pageList.add(1.toString());
    pageList.add(2.toString());
    pageList.add(3.toString());
    pageList.add("...");
    pageList.add(total_pages.toString());
}

//When second last or last page is selected
else if(page > total_pages-2){
    pageList.add(1.toString());
    pageList.add("...");
    pageList.add(total_pages-2.toString());
    pageList.add(total_pages-1.toString());
    pageList.add(total_pages.toString());
}
else{
    pageList.add(1.toString());
    if(page-2 > 1){
        pageList.add("...");
    }
    pageList.add((page-1).toString());
    pageList.add(page.toString());
    pageList.add((page+1).toString());
    if(page+2 < total_pages){
        pageList.add("...");
    }               
    pageList.add(total_pages.toString());
}

修改了以下场景以与其他场景更加一致

c) 总页数为 10，页数为 3：["1", "2", "3", "4", "...", "10"]

d) 总页数为 10，页数为 4：["1", "...", "3", "4", "5", "...", "10"]

g) 总页数为 10，页数为 7：["1", "...", "6", "7", "8", "...", "10"]

【讨论】：