服务端分页之前端根据数据总条数分页

最新推荐文章于 2023-09-28 16:06:59 发布

你敬爱的煌哥哥

最新推荐文章于 2023-09-28 16:06:59 发布

阅读量2.2k

点赞数 1

分类专栏：前端~ 文章标签： javaScript 分页自定义 Jquery

本文链接：https://blog.csdn.net/weixin_42259512/article/details/80831318

版权

前端~ 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

接到一个需求，只给我数据总条数，让我根据总条数自制分页插件，无奈只能边查边写了，以下是我最终完成的一个根据数据总数来进行分页的js代码~,css用的是bootStrap

/**
 * 根据数据总条数分页插件
 */
function createPageByTotal(total){
    var html = "";
    if(total && total > 0){       
        var currentPage = $("#currentPageInput").val();//当前页
        if (isEmpty(currentPage)){    //isEmpty是我的一个js方法就是判断当前页是否有值，你们就判断是不是为空就行了
            currentPage=1;
        }
        //每页显示的条数
        var pageSize = 10;
        //总页数
        var pageCount = Math.ceil(total/10);  //ceil函数也就是你拿到的total/10 如果除不尽，有小数位，则结果舍去小数并+1，21/10=3
        html +="<div class=\"col-sm-12\">";
        html +="<nav aria-label=\"Page navigation\">";
        html +=" <ul class=\"pagination\" style=\"margin-top: 0px;margin-bottom: 0px;float: right\">";
        //第一页时，禁用第一页翻页按钮
        if(currentPage == 1){
            html +="<li class=\"disabled\">";
            html +="<a href=\"javascript:void(0)\" aria-label=\"Previous\">";
            html +="<span aria-hidden=\"true\">«</span>";
            html +="</a>";
            html +="</li>";
        }else{
            html +="<li>";
            html +="<a href=\"javascript:void(0)\" οnclick=\"setCurrentPage("+total+","+1+",'"+pageSize+"')\" aria-label=\"Previous\">";
            html +="<span aria-hidden=\"true\">«</span>";
            html +="</a>";
            html +="</li>";
        }

        //showPageNum此参数必须为偶数,作用是控制页码长度，不要全部显示出来，不然界面不好看。
        var showPageNum = 8;

        var index = 1;
        var end = pageCount;
        if(end > showPageNum){//此处控制页码的改变，1-6，2-9,3-10以此类推~
            if(currentPage < showPageNum){
                end = showPageNum;
            }else if(currentPage >=showPageNum/2 && currentPage < end-showPageNum/2){
                index = currentPage - (showPageNum/2+1);
                end = parseInt(currentPage) + parseInt(showPageNum/2);
            }else{
                index = end- showPageNum+1;
            }
        }
        for(var i = index; i <=end;i++){
            if( i == currentPage){
                html +="<li class=\"active\"><a  href=\"javascript:void(0)\">"+i+" <span class=\"sr-only\">(current)</span></a></li>";
            }else{
                html +="<li><a href=\"javascript:void(0)\" οnclick=\"setCurrentPage("+total+","+i+",'"+pageSize+"')\">"+i+"</a></li>";
            }
        }
        if (pageCount-currentPage>=4){//此处添加省略号效果~，如果页码总数-当前页数大于等于4，则显示...，没有也没差，强迫症~
            html +="<li><a href=\"javascript:void(0)\">"+'...'+"</a></li>";
        }
        //最后一页时，禁用最后一页翻页按钮
        if(currentPage == pageCount){
            html +="<li class=\"disabled\">";
            html +="<a href=\"javascript:void(0)\" aria-label=\"Next\">";
            html +="<span aria-hidden=\"true\">»</span>";
            html +="</a>";
            html +="</li>";
        }else{
            html +="<li>";
            html +="<a href=\"javascript:void(0)\" οnclick=\"setCurrentPage("+total+","+pageCount+",'"+pageSize+"')\" aria-label=\"Next\">";
            html +="<span aria-hidden=\"true\">»</span>";
            html +="</a>";
            html +="</li>";
        }

        html +="<span style=\"color: #2C2E2F;border-top: 0;border-bottom: 0;border-right: 0;padding: 0 8px\">"+currentPage+"/"+pageCount+""+' 共'+""+total+'条'+"</span>";
        html +="<li><input type=\"text\" id=\"goPageText\" min='1' max="+pageCount+" style=\"width: 34px;height: 28px;margin-right: 10px;padding: 0px;text-align: center;\"  /></li>";
        html +="<li><span style=\"float: right;\"  οnclick=\"goPage("+total+",'"+pageSize+"')\"><a href=\"javascript:void(0)\">GO</a></span></li>";
        html +="</ul>";
        html +="</nav>";
    }
    return html; //onClick的代码就不贴了，大致也就是发起ajax局部刷新之类的
}