js、html5 动态分页

/**页面调取开始**/

<div id="paging"></div>    

/**页面调取结束**/

/**js封装开始**/

function paging(pageNum,pageAll){
    var pageHtml="";
    if(pageNum<=0){
        pageNum=1;
    }
    pageHtml+='<ul class="page">';
    //首页 上一页
    if(pageNum>1){
        pageHtml+='<li class="noneBtn" data-val="1">首页</li>'
                +'<li class="noneBtn" data-val="'+(pageNum-1)+'">上一页</li>';
    }else{
        pageHtml+='<li class="noneBtn dot">首页</li>'
                +'<li class="noneBtn dot">上一页</li>';
    }
    //中间页
    if(pageNum==1){
        pageHtml+='<li class="active" data-val="1">1</li>';
    }else{
        pageHtml+='<li data-val="1">1</li>';
    }
    if(pageAll<=10){
        for(var i=1;i<pageAll;i++){
            var pageIndex=i+1;
            if(pageNum==pageIndex){
                pageHtml+='<li class="active" data-val="'+pageIndex+'">'+pageIndex+'</li>';
            }else{
                pageHtml+='<li data-val="'+pageIndex+'">'+pageIndex+'</li>';
            }
        }
    }else if(pageAll>10){
        if(pageNum>5){
            pageHtml+='<li class="dot">...</li>';
        }
        //当前页码左侧2个，从左往右
        var arr = [];
        var left01_pageIndex = 0;
        var left02_pageIndex = 0;
        if(pageNum>1){
            left01_pageIndex=pageNum-2;
            left02_pageIndex=pageNum-1;
        }
        if(left01_pageIndex>1){
            arr.push(left01_pageIndex);
        }
        if(left02_pageIndex>1){
            arr.push(left02_pageIndex);
        }
        //右侧页码2个，从左往右
        var right01_pageIndex = parseInt(pageNum) + 1;
        var right02_pageIndex = parseInt(pageNum) + 2;
        if(pageNum>1){
            arr.push(pageNum);//当前页码
        }
        if(right01_pageIndex<pageAll){
            arr.push(right01_pageIndex);
        }
        if(right02_pageIndex<pageAll){
            arr.push(right02_pageIndex);
        }
        for(var j=0;j<arr.length;j++){
            var pi=arr[j];
            if(pi==pageNum){
                pageHtml+='<li class="active" data-val="'+pi+'">'+pi+'</li>';
            }else{
                pageHtml+='<li data-val="'+pi+'">'+pi+'</li>';
            }
        }
        var lastPageIndex = arr[arr.length - 1];
        if(lastPageIndex+1 < pageAll){
            pageHtml+='<li class="dot">...</li>'
                    +'<li data-val="'+pageAll+'">'+pageAll+'</li>';
        }else if(lastPageIndex+1 == pageAll){
            pageHtml+='<li data-val="'+pageAll+'">'+pageAll+'</li>';
        }

    }
    //下一页 尾页
    if(pageNum<pageAll){
        pageHtml+='<li data-val="'+(parseInt(pageNum)+1)+'">下一页</li>'
                +'<li data-val="'+pageAll+'" class="endPage">尾页</li>';
    }else{
        pageHtml+='<li class="dot">下一页</li>'
                +'<li class="dot endPage" data-val="1">尾页</li>';
    }

    pageHtml+='</ul>';

    //跳页
    pageHtml+='<div class="skip">'
                    +'<input type="text" placeholder="跳转到" class="skipTxt">'
                    +'<input type="button" value="跳转" class="skipBtn">'
                +'</div>';
    $("#paging").html(pageHtml);
}

/**js封装结束**/

/**js点击分页事件开始**/

$("#paging").on("click","li:not(.dot)",function(){
    //【自定义函数==(获取列表数据的函数)】 paging(1,20)可以在自定义函数里调取 动态传当前页和总页数
    paging(1,20);//分页
})

//跳页
$("#paging").on("click",".skipBtn",function(){
    //【自定义函数==(获取列表数据的函数)】 paging(1,20)可以在自定义函数里调取 动态传当前页和总页数
    paging(1,20);//分页
})

/**js点击分页事件结束**/

/**css样式开始**/

#paging{
    width: 100%;
    margin: 20px auto;
    overflow: hidden;
    zoom:1;
    display:flex;
    display:-webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
}
ul.page{
    float: left;
}
ul.page li{
    float: left;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-left: 5px;
    padding: 0px 10px;
    font-size: 12px;
    cursor: pointer;
}
ul.page li.dot{
    cursor:not-allowed;
}
.page li.noneBtn{
    background-color: #f5f5f5;
}
#paging .skip{
    float: left;
}
#paging .skip input{
    height: 30px;
    margin-left:5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    outline: none;
}
#paging .skipTxt{
    width:50px;
    padding:0 5px;
}
#paging .skipBtn{
    background-color: #f5f5f5;
    padding: 0px 10px;
    cursor:pointer;
}
#paging li.active{
    background: #1b71c4;
    color: #fff;
}

/**css样式结束**/

最后展示形式图片