HTML + jQuery实现复杂分页

HTML：

<ul class="pagination">
   
</ul>

 js部分：number(当前页下标从0开始)，total_pages (总页数)

/**
 * 实现分页
 */
function implementPaging (number,total_pages) {
    console.log("number:"+number+"total_pages"+total_pages);

    $('.pagination').empty();

    if(total_pages <= 7){

        if(number === 0){
            $(".pagination").append('<li class="disabled"><span><i class="fa fa-angle-left"></i></span></li>');
        }else {
            $(".pagination").append('<li ><span><i class="fa fa-angle-left"></i></span></li>');
        }

        for (var page = 1; page <= total_pages; page++) {

            if(number+1 == page){
                $('.pagination').append('<li class="active"><span onclick=getAllEngineers('+(page-1)+')>'+page+'</span></li>');
            }else {
                $('.pagination').append('<li><span onclick=getAllEngineers('+(page-1)+')>'+page+'</span></li>');
            }

        }

        if(number === total_pages-1){
            $('.pagination').append('<li class="disabled"><span ><i class="fa fa-angle-right"></i></span></li>')
        }else {
            $('.pagination').append('<li><span onclick=getAllEngineers('+(number+1)+')><i class="fa fa-angle-right"></i></span></li>')

        }

    }else {

        //判断上一页是否可用 加载首页
        if(number === 0){
            $(".pagination").append('<li class="disabled"><span><i class="fa fa-angle-left"></i></span></li>');
            $('.pagination').append('<li class="active"><span onclick=getAllEngineers(0)>1</span></li>');
        }else {
            $(".pagination").append('<li><span onclick=getAllEngineers('+(number-1)+')><i class="fa fa-angle-left"></i></span></li>');
            $('.pagination').append('<li><span onclick=getAllEngineers(0)>1</span></li>');
        }


        //当前 页码 numble 8      total_pages 13
        let startPage = number + 1 <= 4 ? 5 : 7;
        if((number + 1 >= (total_pages - 4))){
            startPage = 6;
        }

        if(startPage == 5){
            for (var page = 2; page <= startPage; page ++){

                if(number !== 0 && number+1 === page){

                    $('.pagination').append('<li class="active"><span onclick=getAllEngineers('+(page-1)+')>'+page+'</span></li>');

                }else {

                    $('.pagination').append('<li><span onclick=getAllEngineers('+(page-1)+')>'+page+'</span></li>');
                }
                if(page === 5){
                    $('.pagination').append('<li><span>...</span></li>');
                    continue;
                }
            }
        }
        if(startPage == 7){
            var flag = 2;
            for(var page = 0;page < startPage; page ++){

                if(page === 0){
                    $('.pagination').append('<li><span>...</span></li>');
                }if(page === 5){
                    $('.pagination').append('<li><span>...</span></li>');
                    break;
                }else {
                    if(number !== 0 && page === 2){
                        $('.pagination').append('<li class="active"><span onclick=getAllEngineers('+(number)+')>'+(number+1)+'</span></li>');
                        flag -=1;
                        continue;
                    }else {
                        if(flag === -3){
                            break;
                        }else {
                            $('.pagination').append('<li><span onclick=getAllEngineers('+(number-(flag))+')>'+(number-(flag)+1)+'</span></li>');
                            flag -=1;
                        }
                    }
                }
            }
        }

        if(startPage === 6){
            var flag = 2;
            if(number == (total_pages -1)){
                startPage = 4;
            }
            for (var page = 0; page <= startPage; page++) {

                if(page === 0){
                    $('.pagination').append('<li><span>...</span></li>');
                }else if(number !== 0 && page === 3){
                    if(number == (total_pages-1)){
                        break;
                    }
                    $('.pagination').append('<li class="active"><span onclick=getAllEngineers('+(number)+')>'+(number+1)+'</span></li>');
                    flag -=1;
                    continue;
                }else if(page === 6){
                    $('.pagination').append('<li><span>...</span></li>');
                }else{
                    if((number-flag)>=total_pages-1){
                        break;
                    }
                    // if(number != (total_pages-1)){
                    $('.pagination').append('<li><span onclick=getAllEngineers('+(number-(flag))+')>'+(number-(flag)+1)+'</span></li>');
                    flag -= 1;
                    // }
                }
            }
        }
        //判断下一页是否可用 加载尾页
        if(number === total_pages-1){

            $('.pagination').append('<li class="active"><span onclick=getAllEngineers('+(total_pages-1)+')>'+total_pages+'</span></li>')
            $('.pagination').append('<li class="disabled"><span ><i class="fa fa-angle-right"></i></span></li>')

        }else {

            $('.pagination').append('<li><span onclick=getAllEngineers('+(total_pages-1)+')>'+total_pages+'</span></li>')
            $('.pagination').append('<li><span onclick=getAllEngineers('+(number+1)+')><i class="fa fa-angle-right"></i></span></li>')

        }

    }

}