分页显示 5 页并隐藏其余页面答案

【问题标题】：Pagination to show 5 pages and hide rest of the pages分页显示 5 页并隐藏其余页面
【发布时间】：2020-10-25 13:41:38
【问题描述】：

我试图设计一个带有分页的结果显示页面。我可以显示所有页面或 5 页。我想逐步显示 5 页。

此代码的问题在于，它显示了所有页面。如果有 12 个页面，则显示 12 个按钮。

var length = response.length;
console.log(length);
function pagination(length){
    var size = Math.ceil(length/10);
    
    var pageDiv = $('.pagination');
    var pageDivData = "";
    pageDivData += "<a href='javascript:void(0)' id='firstPage' class='firstPage'>&laquo;</a>";
    var stepSize = 5;
    var stepCount = Math.ceil(size/stepSize);
    console.log(stepCount);
    for(var step = 1; step<stepCount; step++){
        for(var i=id; i<=stepSize; i++){
            if(id == i){
                pageDivData +="<a href='javascript:void(0)' class='pageNo active' id='"+i+"'>"+i+"</a>";
            }else{
                pageDivData +="<a href='javascript:void(0)' class='pageNo' id='"+i+"'>"+i+"</a>";
            }
        }
        stepSize++;
    }
    pageDivData += "<a href='javascript:void(0)'>...</a>";
    pageDivData += "<a href='javascript:void(0)' class='pageNo id='"+size+"'>"+(size)+"</a>";
    if(id!=size){
        pageDivData += "<a href='javascript:void(0)' id='lastPage'>&raquo;</a>";
    }
    pageDiv.html(pageDivData);
}
pagination(length);

【问题讨论】：

能否也分享一下你的html代码。
HTML 中没有什么，它只是一个空标签，因为我正在动态创建所有链接

标签： javascript jquery pagination

【解决方案1】：

您想在此处一次显示 5 个页面。因此，对于 5 个页面，您将值存储在名为 stepSize 的变量中，因此您只需将其保持为 5。

你在每一步都增加 stepSize 的值，你不应该增加它，只保持 5。

我不明白你的第一个 for 循环的目的。 stepCount 是做什么的，为什么需要。

所以可以简单地用下面的代码编辑你的代码：

var length = response.length;
    console.log(length);
    function pagination(length){
        var size = Math.ceil(length/10);
        
        var pageDiv = $('.pagination');
        var pageDivData = "";
        pageDivData += "<a href='javascript:void(0)' id='firstPage' class='firstPage'>&laquo;</a>";
        var stepSize = 5;
            for(var i=id; i<=stepSize; i++){
                if(id == i){
                    pageDivData +="<a href='javascript:void(0)' class='pageNo active' id='"+i+"'>"+i+"</a>";
                }else{
                    pageDivData +="<a href='javascript:void(0)' class='pageNo' id='"+i+"'>"+i+"</a>";
                }
        }
        pageDivData += "<a href='javascript:void(0)'>...</a>";
        pageDivData += "<a href='javascript:void(0)' class='pageNo id='"+size+"'>"+(size)+"</a>";
        if(id!=size){
            pageDivData += "<a href='javascript:void(0)' id='lastPage'>&raquo;</a>";
        }
        pageDiv.html(pageDivData);
    }
pagination(length);

【讨论】：

【解决方案2】：

解决方案是根据要求进行许多 ajax 调用。解决方案来自不同的部分

【讨论】：