分页组件

html

  <!--分页-->
        <div class="pageFileBox">
            <div class="tableItemNum fl" style="margin-right:10px;" id="reportCount" totalcount="0">0条</div>
            @* <div class=" fl" style="margin-right:10px;">
                <span class="fl" style="margin-right:4px;">每页显示</span>
                <div class="selectedBox fl" data-relevance="ChangePageSize">
                <div class="selected" data-direction="top">
                <span class="slectContent slectContent_page" data-id="50">50</span>
                <img src="Image/xiala.png" class="bg1" alt="" />
                </div>
                <ul class="ulSelectBox">
                <li><a href="javascript:;" data-id="0">全部</a></li>
                <li><a href="javascript:;" data-id="10">10</a></li>
                <li><a href="javascript:;" data-id="50">50</a></li>
                <li><a href="javascript:;" data-id="100">100</a></li>
                <li><a href="javascript:;" data-id="200">200</a></li>
                <li><a href="javascript:;" data-id="300">300</a></li>
                <li><a href="javascript:;" data-id="400">400</a></li>
                <li><a href="javascript:;" data-id="500">500</a></li>
                </ul>
                </div>
                <span class="fl" style="margin-left:4px;">条</span> *@
            <div style="display:inline-block;clear:both;content:'';"></div>
        </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>
            <p class="text-r  fr" style="padding-right: 32px" id="personSum">共23条</p>
        </div>

css 

.page {
    margin-top: 28px;
    height: 40px;
    border: 1px solid red;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
/*分页*/
.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;
    padding: 0px 11px;
    line-height: 28px;
    height: 28px;
    border: 1px solid #e3e3e3;
    margin-right: 7px;
}

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

    .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;
    }
/*分页结束*/

js 

//分页
    $(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, totalCount) {

            pageIndex = parseInt(pageIndex);
            totalPage = parseInt(totalPage);
            totalCount = parseInt(totalCount);

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

    @* /**
        * 改变分页大小
        * param {any} size
        */ *@
        function ChangePageSize(size) {
            if (size == 0) {
                size = $("#reportCount").attr("total");
            }
            g_pageSize = size;
            g_curPage = 1;
            LoadDataByPage(g_curPage);
        }
    LoadPageHtml(5, 7, 400);