好久没有手写js组件了，做个记录，在一些静态网站还是经常会用到的

实现效果

//只需要用到这两个变量
//pageNo: 当前页数
//totalPage: 总页数

//效果: [1] [...] [pageNo-2] [pageNo-1] [pageNo] [pageNo+1] [pageNo+2] [...] [totalPage]
var paginationHtml="";
//首页
paginationHtml += `<a class="first" onclick="getPage(1)">首页</a>`;
//上一页
paginationHtml += `<a class="previous" onclick="getPage(${pageNo-1})">&lt;</a>`;

//如果总页数小于等于7，则全部显示
if(totalPage <= 7){
    for(var i=1; i<=totalPage; i++){
        if(pageNo == i){
            paginationHtml += `<a class="active" onclick="getPage(${i})">${i}</a>`;
        }else{
            paginationHtml += `<a onclick="getPage(${i})">${i}</a>`;
        }
    }
}else{
    //如果总页数大于7，则必定会出现[...]
    //先判断首页有没有[...]
    //如果当前页数小于等于4，则首页没有，尾页必定有[...]
    if(pageNo <= 4){
        for(var i=1; i<=pageNo+2; i++){
            if(pageNo == i){
                paginationHtml += `<a class="active" onclick="getPage(${i})">${i}</a>`;
            }else{
                paginationHtml += `<a onclick="getPage(${i})">${i}</a>`;
            }
        }
        paginationHtml += `<a>...</a>`;
        paginationHtml += `<a onclick="getPage(${totalPage})">${totalPage}</a>`;
    }else{
        //如果当前页数大于4，则首页必定有[...]
        paginationHtml += `<a onclick="getPage(1)">1</a>`;
        paginationHtml += `<a>...</a>`;
        //再判断尾页有没有[...]
        //如果当前页大于等于总页数-3，则尾页没有[...]
        if(pageNo >= totalPage-3){
            for(var i=pageNo-2; i<=totalPage; i++){
                if(pageNo == i){
                    paginationHtml += `<a class="active" onclick="getPage(${i})">${i}</a>`;
                }else{
                    paginationHtml += `<a onclick="getPage(${i})">${i}</a>`;
                }
            }
        }else{
            //如果当前页小于总页数-3，则尾页必定有[...]
            for(var i=pageNo-2; i<=pageNo+2; i++){
                if(pageNo == i){
                    paginationHtml += `<a class="active" onclick="getPage(${i})">${i}</a>`;
                }else{
                    paginationHtml += `<a onclick="getPage(${i})">${i}</a>`;
                }
            }
            paginationHtml += `<a>...</a>`;
            paginationHtml += `<a onclick="getPage(${totalPage})">${totalPage}</a>`;
        }
    }
}

//下一页
paginationHtml += `<a class="next" onclick="getPage(${pageNo+1})">&gt;</a>`;
//尾页
paginationHtml += `<a class="last" onclick="getPage(${totalPage})">尾页</a>`;

$('#pagination').html(paginationHtml);

没有用jquery的话用innerHTML也一样的

document.getElementById("pagination").innerHTML = paginationHtml;