带-in的圆点使用纯javascript进行分页

Question

我需要一个小帮助来实现使用纯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“

Answer 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“