js上一页/下一页真分页的页码生成

//传入“当前页码 每页容量 数据总条数”
//返回按钮上的文本内容,如:pageBtns(2,10,75) 返回:"上一页,1,2,3,4,...,8,下一页" 以逗号分隔的字符串                 
function pageBtns(currentPageIndex,currentPageSize,dataCount){
    var cpIndex=parseInt(currentPageIndex);
    var pageSize=parseInt(currentPageSize);
    var count=parseInt(dataCount);
    var btnStr="";
    var pages=(count % pageSize)==0 ? (count/pageSize):Math.floor((count/pageSize+1));//总页数
    if(pages<=6){//如果小于6页 则显示全部页码按钮
        for(var i=1;i<=pages;i++){
            btnStr+=i+",";
        }
    }
    else{ //大于等于7页
        var a=[];
        if(cpIndex !=1)//位置0
        {
            a[0]="上一页";
        }
        else{
            a[0]="";
        }


        a[1]="1"; //位置1 首页


        if((cpIndex-2)>2){//位置2
            a[2]="...";
        }
        else{
            a[2]="";
        }


        if((cpIndex-2)>=2)//位置3
        {
            a[3]=cpIndex-2;
        }
        else{
            a[3]="";
        }


        if((cpIndex-1)>=2)//位置4
        {
            a[4]=cpIndex-1;
        }
        else{
            a[4]="";
        }


        //位置5
        if(cpIndex!=1 && cpIndex!=pages){
            a[5]=cpIndex;
        }
        else{
            a[5]="";
        }


        //位置6
        if((cpIndex+1)<pages)
        {
            a[6]=cpIndex+1;
        }else{
            a[6]="";
        }


        //位置7
        if((cpIndex+2)<pages)
        {
            a[7]=cpIndex+2;
        }
        else{
            a[7]="";
        }


        //位置8
        if((cpIndex+2+1)<pages){
            a[8]="...";
        }
        else{
            a[8]="";
        }


        //位置9
        a[9]=pages;


        //位置10
        if(cpIndex!=pages){
            a[10]="下一页";
        }
        else{
            a[10]="";
        }


        $.each(a,function(j){
            if(a[j]!="")
            {
            btnStr+=a[j]+",";
            }
        });
    }
    btnStr=btnStr.substring(0,btnStr.length-1);
    console.log(btnStr);
    return btnStr;
}


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
动态分页可以使用 JavaScript 来实现,下面是一个简单的例子: HTML: ``` <div id="pagination"></div> ``` JavaScript: ``` var currentPage = 1; // 当前页码 var totalPage = 20; // 总页数 function generatePagination() { var pagination = document.getElementById("pagination"); var html = ""; // 上一页 if (currentPage > 1) { html += "<a href='javascript:void(0)' onclick='goToPage(" + (currentPage - 1) + ")'>上一页</a>"; } // 五页 var startPage = currentPage - 2; var endPage = currentPage + 2; if (startPage < 1) { endPage += 1 - startPage; startPage = 1; } if (endPage > totalPage) { startPage -= endPage - totalPage; endPage = totalPage; } for (var i = startPage; i <= endPage; i++) { if (i == currentPage) { html += "<span>" + i + "</span>"; } else { html += "<a href='javascript:void(0)' onclick='goToPage(" + i + ")'>" + i + "</a>"; } } // 下一页 if (currentPage < totalPage) { html += "<a href='javascript:void(0)' onclick='goToPage(" + (currentPage + 1) + ")'>下一页</a>"; } pagination.innerHTML = html; } function goToPage(page) { currentPage = page; generatePagination(); } generatePagination(); ``` 这个例子中,我们首先定义了当前页码 `currentPage` 和总页数 `totalPage`。然后,我们定义了一个 `generatePagination()` 函数,用来生成分页。在这个函数中,我们首先生成一页按钮,如果当前页不是第一页的话。然后,我们计算出需要显示的五页的页码,用一个循环生成这些页码。最后,我们生成一页按钮,如果当前页不是最后一页的话。当用户点击上一页、下一页或者某个页码时,我们会调用 `goToPage()` 函数,这个函数会更新当前页码,再重新生成分页

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值