使用香草javascript和点进行分页

我在javascript中有一个分页，我想在该分页中添加带点的步骤。 以照片为例，我希望在三页之后和最后三页之前有点

12310112

我有一个var页面大小和项目总数。当ajax调用成功时，第一次创建分页

// how many items per page
var pageSize = 20;
// initial page to display (first page MUST be 1 and not 0)
var pageNo = 1;
var paginationButtons;

---

我的页面上有这一代的分页

function generatePaginationList(totalPages) {
    const paginationWrapper = document.querySelector('#pagination-wrapper');
    const list = document.createElement('ul');
    list.className = 'pagination';

    for(i = 0; i < totalPages; i++) {

        var listItem = document.createElement('li');
        var listItemButton = document.createElement('button');
        var listItemButtonText = document.createTextNode(i+1);

        // set the page defined in pageNo as active by default
        if (i == pageNo-1) listItemButton.className = 'active-page';
        
        listItemButton.appendChild(listItemButtonText);
        listItem.appendChild(listItemButton);
        list.appendChild(listItem);
    }

    paginationWrapper.appendChild(list);
    paginationButtons = document.querySelectorAll('.pagination li button');

    paginationButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            // unset previous active-page button
            document.querySelector('.active-page').classList.remove('active-page');

            this.classList.add('active-page');
            fetchData(pageSize, this.innerText, false,date_from,date_to); //ajax call on every change of pagination
        });
    });
}

function generatePaginationList（总页数）{
const paginationWrapper=document.querySelector（“#分页包装器”）；
const list=document.createElement（'ul'）；
list.className='pagination'；
对于（i=0；i{
btn.addEventListener（'click'，function（）{
//取消设置上一活动页按钮
document.querySelector（'.activepage'）.classList.remove（'active-page'）；
this.classList.add（'active-page'）；
fetchData（pageSize，this.innerText，false，date_from，date_to）；//每次更改分页时都调用ajax
});
});
}

多谢各位。 当做

---

乔治

我希望这样就行了。如果你不明白，请告诉我

基本上，每一页都有大小写，以点作为占位符

让pageNo=1；
const pageWrapper=document.querySelector（'.pages'）；
const input=document.querySelector（'input[type=number]”）；
document.querySelector（'button'）。addEventListener（'click'，generatePagination）；
函数generatePagination（）{
let pages，count=+input.value；
如果（pageNo>count）pageNo=count；
如果（计数>=15）页=[1,2,3'，…'，Math.ceil（计数/2），Math.ceil（计数/2）+1'，…'，计数-2，计数-1，计数]；
如果（计数>=8）页面=[1,2,3'…'，Math.ceil（计数/2），'…'，计数-1，计数]；
如果（计数>5）页=[1,2,3'…'，计数]；
else pages=new Array（count）.fill（0）.map（（uu，i）=>++i）；
pageWrapper.innerHTML=''；
pages.forEach（第=>{
如果（页面=='…'）pageWrapper.innerHTML+=页面；
否则{
const button=Object.assign（document.createElement（'div'）{
类名：“按钮”，
innerText:第页
});
pageWrapper.append（按钮）；
if（page==pageNo）button.classList.add（'active'）；
}
});
}
addEventListener（'click'，e=>{
常数按钮=e.目标；
如果（！button.classList.contains（'button'））返回；
document.querySelector（'.button.active'）.classList.remove（'active'）；
button.classList.add（'active'）；
pageNo=button.innerText；
});
正文{
显示器：flex；
对齐项目：居中；
证明内容：中心；
柔性流：柱包裹；
差距：1勒姆；
宽度：100vw；
高度：100vh；
}
.页{
显示器：flex；
对齐项目：居中；
证明内容：中心；
柔性流：行换行；
间隙：.25雷姆；
}
.按钮{
显示器：flex；
对齐项目：居中；
证明内容：中心；
宽度：1em；
高度：1公厘；
背景色：#388697；
颜色：白色；
填充：.5rem；
光标：指针；
边框：2倍实心透明；
}
.active.按钮，
.按钮：悬停{
颜色：#388697；
边框：2个实心#388697；
背景色：透明；
}

创建分页
感谢您的回答。似乎不起作用。pagesize是声明表中有多少项的变量。不是书页。如果有误会，我很抱歉。页码是活动页面。有没有办法编辑上面的代码来得到这个结果？@gioiliop，我已经编辑了我的答案，请检查它是否符合你的要求
function calculateTotalPages(totalItems, pageSize) {
    return Math.ceil(totalItems/pageSize);
}

function generatePaginationList(totalPages) {
    const paginationWrapper = document.querySelector('#pagination-wrapper');
    const list = document.createElement('ul');
    list.className = 'pagination';

    for(i = 0; i < totalPages; i++) {

        var listItem = document.createElement('li');
        var listItemButton = document.createElement('button');
        var listItemButtonText = document.createTextNode(i+1);

        // set the page defined in pageNo as active by default
        if (i == pageNo-1) listItemButton.className = 'active-page';
        
        listItemButton.appendChild(listItemButtonText);
        listItem.appendChild(listItemButton);
        list.appendChild(listItem);
    }

    paginationWrapper.appendChild(list);
    paginationButtons = document.querySelectorAll('.pagination li button');

    paginationButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            // unset previous active-page button
            document.querySelector('.active-page').classList.remove('active-page');

            this.classList.add('active-page');
            fetchData(pageSize, this.innerText, false,date_from,date_to); //ajax call on every change of pagination
        });
    });
}