时间戳

首页 > 解决方案 > 使用纯javascript进行分页的点

javascript - 使用纯javascript进行分页的点

问题描述

在使用纯 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"]

标签： javascriptpagination

解决方案

这应该适合你。

//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"]

推荐阅读