分页组件

html

<div class="page">

        <!--分页-->

        <div class="firstpage jump">首页</div>

        <div class="pageBox" data-pageFun="pageClick" data-allPage="15" id="PageIndexDiv">

            <i data-page="prev" data-revelation="prevPage">上一页</i>

            <div class="pageFile fl overflow" id="PageNum"></div>

            <i data-page="next" data-revelation="prevPage">下一页</i>

        </div>

        <div class="lastpage jump">尾页</div>

        <div class="pageFileBox">

            <div class="tableItemNum fl" style="margin-right:10px;" id="pagenumber" totalcount="0">0页</div>

            <div style="display:inline-block;clear:both;content:'';"></div>

        </div>

</div>

css 

.page {
    margin-top: 28px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    color: #999999;
}
/*分页*/
.jump {
    width: 50px;
    height: 28px;
    border: 1px solid #E3E3E3;
    line-height: 28px;
    margin-right: 7px;
    text-align: center;
    user-select: none;
}
.jump:hover {
    cursor: pointer;
}
.fl {
    float: left;
}
.pageFileBox {
    line-height: 28px;
}


    .pageFileBox .slectContent {
        height: 28px;
        line-height: 28px;
    }



.tableItemNum {
    border: 1px solid #e3e3e3;
    padding: 0px 5px;
    height: 28px;
}



.pageFileBox .selectedBox {
    width: 66px;
    border: 1px solid #e3e3e3;
}



.pageFileBox .ulSelectBox {
    border-color: #e3e3e3;
    border-top-color: #e3e3e3 !important;
}



.pageFileBox .selectedBox .slectContent {
    width: 40px;
}



.pageFileBox .selectedBox .ulSelectBox {
    max-height: 300px;
}



.pageFileBox .selected .bg1 {
    margin-top: 12px;
}



.pageBox {
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}



    .pageBox > i {
        float: left;
        padding: 0px 11px;
        line-height: 28px;
        height: 28px;
        border: 1px solid #e3e3e3;
        margin-right: 7px;
        font-style: normal;
    }



        .pageBox > i:hover {
            cursor: pointer;
        }



.pageFile > span {
    float: left;
    width: 30px;
    line-height: 28px;
    height: 28px;
    text-align: center;
    border: 1px solid #e3e3e3;
    margin-right: 7px;
    user-select: none;
}



    .pageFile > span.active {
        background: #E3E3E3;
        color: #fff;
        border-color: #E3E3E3;
    }



    .pageFile > span:hover {
        cursor: pointer;
    }



.pageFile > .noPage {
    float: left;
    padding: 0px 11px;
    line-height: 32px;
    height: 32px;
    border: 1px solid #fff;
    margin-right: 7px;
    margin-top: -6px
}



    .pageFile > .noPage:hover {
        cursor: auto;
    }
    .pageBox i {
        user-select: none;
    }
/*分页结束*/

js 

let g_curPage = 1;
    let g_totalPage = 20;
        $(".typeContain").on("click", ".checkBox", function (e) {
            if ($(e.target).hasClass("Isfalse")) {
                $(".typeContain .checkBox").removeClass("Istrue").addClass("Isfalse");
                $(e.target).removeClass("Isfalse").addClass("Istrue")
            } else if ($(e.target).hasClass("Istrue")) {
                return
            }
            console.log($(e.target).parent(".typeItem").attr("data-id"))
        })
    let Html = $(".hospitalcontain").html()
    let Html01 = ""
    for (let i = 0; i < 8; i++) {
        Html01 += Html
    }
    $(".hospitalcontain").html(Html01)
    /*
 * 独立分页JS，避免与功能页面JS交互在一起
 * 2021-09-22 wml
 */


    //分页
    $(document).on("click", ".pageBox>i", function () {
        //当前页数
        var activeDom = $(this).siblings(".pageFile").find(".active");
        var nowPage = activeDom.html() * 1;
        var allPage = activeDom.parents(".pageBox").attr("data-allPage") * 1;
        var pageNum = 0;
        if ($(this).attr("data-page") == "prev") {
            //上一页
            if (nowPage <= 1) { return false }
            pageNum = nowPage - 1;
            if (pageNum == (allPage - 1) && allPage > 10) {
                activeDom.siblings(".noPage").prev().addClass("active");
            } else {
                activeDom.prev().addClass("active");
            }
            activeDom.removeClass("active");
        } else {
            //下一页
            if (nowPage >= allPage) { return false; }
            activeDom.removeClass("active");
            pageNum = nowPage + 1;
            if (pageNum == allPage) {
                activeDom.siblings(".endPage").addClass("active");
            } else {
                activeDom.next().addClass("active");
            }
        }



        var funName = $(this).attr("data-revelation");
        window[funName](pageNum)
        //pageStyle();
    })
    $(document).on("click", ".pageFile span", function () {
        if ($(this).hasClass("active") || $(this).hasClass("noPage")) {
            return false;
        }
        $(this).siblings(".active").removeClass("active");
        $(this).addClass("active");
        var clickPage = $(this).attr("data-index");
        //点击页数
        var funName = $(this).parents(".pageBox").attr("data-pageFun");
        window[funName](clickPage);
        //pageStyle();
    })



    @* /**
        * 加载分页布局
        * param {any} pageIndex 当前页
        * param {any} totalPage 总页数
        * param {any} totalCount 总行数
        */ *@
        function LoadPageHtml(pageIndex, totalPage, maxShowPage) {



            pageIndex = parseInt(pageIndex);
            totalPage = parseInt(totalPage);
            maxShowPage = parseInt(maxShowPage);



            var pageUi = "";
            $("#PageNum").html("");
            if (maxShowPage == 0 | totalPage == 0) {
                $("#PageNum").html("");
                $(".pageFileBox").addClass("hide");
                return false;
            }
            $("#pagenumber").html("共"+totalPage + "页");
            $("#PageIndexDiv").attr("data-allpage", totalPage);
            $(".pageFileBox").removeClass("hide");
            var i = 1;
            i = parseInt(i);
            if (totalPage <= maxShowPage) {//总页数小于五页，则加载所有页 
                for (i; i <= totalPage; i++) {
                    if (i == pageIndex) {
                        pageUi += '<span class="active" data-index="' + i + '">' + i + '</span>';
                    } else {
                        pageUi += '<span class="" data-index="' + i + '">' + i + '</span>';
                    }
                };
                $("#PageNum").html(pageUi);
                return false;
            } else if (totalPage > maxShowPage) {//总页数大于五页，则加载五页
                if (pageIndex < maxShowPage - 2) {//当前页小于5，加载1-5页
                    for (i; i <= maxShowPage - 2; i++) {
                        if (i == pageIndex) {
                            pageUi += '<span class="active" data-index="' + i + '">' + i + '</span>';
                        } else {
                            pageUi += '<span class="" data-index="' + i + '">' + i + '</span>';
                        }
                    };
                    if (pageIndex <= totalPage - 2) {//最后一页追加“...”代表省略的页
                        pageUi += '<i style="border-color:#fff;" class="noPage">..</i>';
                    }
                    pageUi += '<span class="" data-index="' + totalPage + '">' + totalPage + '</span>';
                    $("#PageNum").html(pageUi);
                    return false;
                } else if (pageIndex >= maxShowPage - 2) {//当前页大于5页 
                    for (i; i <= 1; i++) {//1,2页码始终显示
                        pageUi += '<span data-index="' + i + '">' + i + '</span>';
                    }
                    pageUi += '<i style="border-color:#fff;" class="noPage">..</i>';//2页码后面用...代替部分未显示的页码
                    if (pageIndex > totalPage - (maxShowPage - 3)) {//当前页+1等于总页码(倒数第二页) 
                        for (i = totalPage - (maxShowPage - 3); i <= totalPage; i++) {//“...”后面跟三个页码当前页居中显示
                            if (i == pageIndex) {
                                pageUi += '<span class="active" data-index="' + i + '">' + i + '</span>';
                            } else {
                                pageUi += '<span data-index="' + i + '">' + i + '</span>';
                            }
                        }
                    } else {//当前页小于总页数，则最后一页后面跟... 
                        //4个一组
                       for(i=pageIndex - parseInt((maxShowPage - 5)/2);i<=pageIndex + parseInt((maxShowPage - 5)/2);i++){
                        if(i == pageIndex){
                            pageUi += '<span class="active" data-index="' + i + '">' + i + '</span>';
                        }else{
                            pageUi += '<span data-index="' + i + '">' + i + '</span>';
                        }
                       }
                        pageUi += '<i style="border-color:#fff;" class="noPage">..</i>';
                        //最后一页
                        pageUi += '<span data-index="' + totalPage + '">' + totalPage + '</span>';
                    }
                    $("#PageNum").html(pageUi);
                    return false;
                }
            }
        }



    @* /**
        * 上一页、下一页
        * param {any} pageNum
        */ *@
        function prevPage(pageNum) {
            g_curPage = pageNum;
            LoadDataByPage(g_curPage);
        }



    @* /**
        * 点击当前页
        * param {any} pageNum
        */ *@
        function pageClick(pageNum) {
            g_curPage = pageNum;
            LoadDataByPage(g_curPage);
        }
    LoadPageHtml(g_curPage, g_totalPage, 9);
    LoadDataByPage();
    @* 改变页码时触发的函数 *@
    function LoadDataByPage(){
        LoadPageHtml(g_curPage, g_totalPage, 9);
    }
    //点击页面“首页”
    $(".firstpage").on("click",function(){
        g_curPage = 1;
        LoadDataByPage();
    })
    //点击分页“尾页”
    $(".lastpage").on("click",function(){
        g_curPage = g_totalPage;
        LoadDataByPage();
    })