jq +html 实现 分页效果

页面容器

 <div id="pageNum"></div>

样式

#pageNum{
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #818181;
}
#pageNum div{
    border: 1px solid #D3D3D3;
    line-height: 30px;
    font-size: 16px;
    cursor: pointer;
    padding: 0 8px;
    border-radius: 5px;
    margin-right: 8px;
    min-width: 39px;
    text-align: center;
}
#pageNum ._all_page_item_{
    display: flex;
    align-items: center;
    border: none;
}
._hidden_{
    display: none;
}
._page_item_check{
    background-color: #F9C922;
    border: none;
    color: #1D1D1D;
}

._all_page_number_{
    padding-right: 15px;
}
._jump_page_ ._jump_page_btn_{
    background-color: #F9C922;
    color: #1D1D1D;
    margin-left: 10px;
    padding: 3px 5px;
    border-radius: 3px;
}

JS内容
划重点：
dom：容器的id；
allPage:总页数；
functionName:页面改变的时候需要调用的 方法;
以下js是一个单独的 js 文件

function _creatPagingDom_(dom,allPage,functionName) {
    if(dom.length > 0){
        dom.empty();
        let itemDom ="",
            itemList ='<div class="_all_page_item_">',
            endDom ='<text class="_all_page_number_">共'+allPage+'页</text>',



            previousListDom ='<div class="_previous_page_ _hidden_">&lt;</div>',
            firstPageDom = '<div class="_first_page_  _hidden_ _jump_page_">1</div>',
            hideDom =  '<div class="_left_hide_page_ _hidden_">...</div>',


            nextListDom = '<div class="_next_page_">&gt;</div>',
            hideDom1 = '<div class="_right_hide_page_ ">...</div>',
            lastPageDom = '<div class="_end_page_  _jump_page_">'+allPage+'</div>';



        for(let i = 1; i < allPage; i++){
            if(i === 1){
                itemDom+='<div class="_page_item_  _page_item_check">'+i+'</div>';
            }else if(i>5){
                break;
            }else{
                itemDom+='<div class="_page_item_">'+i+'</div>';
            }
        }
        itemList +=( itemDom + '</div>');
        if(Math.round(allPage/5)>1){
            endDom += previousListDom + firstPageDom + hideDom + itemList + hideDom1+lastPageDom +nextListDom;
            dom.append(endDom);
            dom.find("._end_page_").show();
            dom.find("._right_hide_page_").show();
        }else{
            endDom += previousListDom+itemList + lastPageDom;
            dom.append(endDom);
        }


    }else{
        console.log("dom is undefined")
    };

    //改变
    function _changePagingList_() {
        if(page == 1 || page == allPage){
            _page_jump_();
        }else if(page < 5){
            if(page >3){
                dom.find("._left_hide_page_").show();
            }
            dom.find("._previous_page_").show();

        }else if(page == 5){
            dom.find("._first_page_").show();
            _creatPaginDom()
        } else if(page>5 && page < allPage - 5){
            _creatPaginDom()
        }else if( allPage - page > 2){
            dom.find("._right_hide_page_").show();
            dom.find("._end_page_").show();
            if(allPage - page == 3){
                dom.find("._end_page_").hide();
            }
            _creatPaginDom()
        } else if(page == allPage - 2){
            dom.find("._right_hide_page_").hide();
            dom.find("._end_page_").hide();
            _creatPaginDom()

        }
        else if(page == allPage - 1){
            dom.find("._all_page_item_").empty();
            let listDoms='<div class="_page_item_">'+(page - 3)+'</div>' +
                '<div class="_page_item_">'+(page-2)+'</div>' +
                '<div class="_page_item_">'+(page-1)+'</div>' +
                '<div class="_page_item_ _page_item_check">'+page+'</div>' +
                '<div class="_page_item_">'+(page+1)+'</div>' ;

            dom.find("._all_page_item_").append(listDoms);
            dom.find("._next_page_").show();
        }else{
            console.log("这不可能出现")
        }

    }
   function _creatPaginDom(){
       dom.find("._all_page_item_").empty();
       let listDoms='<div class="_page_item_">'+(page - 2)+'</div>' +
           '<div class="_page_item_">'+(page-1)+'</div>' +
           '<div class="_page_item_ _page_item_check">'+page+'</div>' +
           '<div class="_page_item_">'+(page+1)+'</div>' +
           '<div class="_page_item_">'+(page+2)+'</div>';
       dom.find("._all_page_item_").append(listDoms);
   }


    function _page_jump_(){
        if(page == 1){
            dom.find("._previous_page_").hide()
            dom.find("._first_page_").hide();
            dom.find("._left_hide_page_").hide();


            dom.find("._right_hide_page_").show();
            dom.find("._end_page_").show();
            dom.find("._next_page_").show();

            dom.find("._all_page_item_").empty();
            let listDoms='<div class="_page_item_ _page_item_check">'+page+'</div>' +
                '<div class="_page_item_">'+(page + 1)+'</div>' +
                '<div class="_page_item_ ">'+(page+2)+'</div>' +
                '<div class="_page_item_">'+(page+3)+'</div>' +
                '<div class="_page_item_">'+(page+4)+'</div>'
            dom.find("._all_page_item_").append(listDoms);


        }else{
            dom.find("._previous_page_").show()
            dom.find("._first_page_").show();
            dom.find("._left_hide_page_").show();


            dom.find("._right_hide_page_").hide();
            dom.find("._end_page_").hide();
            dom.find("._next_page_").hide();
            dom.find("._all_page_item_").empty();
            let listDoms='<div class="_page_item_">'+(page - 4)+'</div>' +
                '<div class="_page_item_">'+(page-3)+'</div>' +
                '<div class="_page_item_">'+(page-2)+'</div>' +
                '<div class="_page_item_">'+(page-1)+'</div>' +
                '<div class="_page_item_ _page_item_check" >'+page+'</div>'

            dom.find("._all_page_item_").append(listDoms);
        }
    }

    $(dom).on("click","._page_item_",function () {
        let textDom = $(this);
        page = Number( textDom.text());
        textDom.addClass("_page_item_check").siblings().removeClass("_page_item_check")
        _changePagingList_();
        functionName();
    });
    $(dom).on("click","._previous_page_",function () {
        let prevDom = dom.find("._page_item_check").prev();
        if(prevDom.text() || Number(prevDom.text())>0 ){
            page =  Number(prevDom.text())
            prevDom.addClass("_page_item_check").siblings().removeClass("_page_item_check")
            _changePagingList_();
            functionName();
        }

    })
    $(dom).on("click","._next_page_",function () {
        let nextDom = dom.find("._page_item_check").next();
        if(nextDom.text() || Number(nextDom.text())>0 ){
            page =  Number(nextDom.text())
            nextDom.addClass("_page_item_check").siblings().removeClass("_page_item_check")
            _changePagingList_();
            functionName();
        }

    })

    $(dom).on("click","._jump_page_",function () {
        let textDom = $(this);
        page = Number( textDom.text());
        _page_jump_();
        functionName();
    })
}

页面中使用方法
将上面的js代码写入单独的js文件，在页面上引入就能使用了

function getPagedata(){
	$.ajax({
	ulr:"",
	.....
	success:function(res){
		 _creatPagingDom_($("#pageNum"),res.Datas.allPage,checkUser);
		}
	})
}
function checkUser(){
	getPagedata();
}

最后效果