原生Bootstrap实现动态分页（代码实例）

最近开发时需要动态显示分页页数，写了一个动态显示页数的算法。效果为动态显示当前页数以及后的页数，规定自己想要显示的页数x，若总页数小于x，则显示自己的页数，若大于x，则每次只显示当前所在页数，以及之后的x页。

效果图

<!-- 动态获取我的思维导图的页数 -->  
    function getMyMindMapPage(currentPage){  
          
        var html="";  
        var lastPage;  
        var nextPage;  
        var showPage=4;      //每次显示的页数  
        var index;  
        var x;               //定义后面页数固定  
        var adata={"parentid":"00100"};  
        var data=JSON.stringify(adata);  
          
        $.ajax({  
            type:"post",  
            contentType:"application/json",  
            dataType:"json",  
            data:data,  
            url:"myMindMapTotal.do",  
              
            success:function(data){  
                if(data==null){  
                    alert("获取失败");  
                }else{  
                      
                    html+="<ul class='pagination'>";  
                    html+="<li><span onclick='getMyMindMap(1)'>首页</span></li>";  
                      
                    lastPage=currentPage;  
                    if(lastPage<=1){  
                        lastPage==1;  
                    }else{  
                        lastPage--;  
                    }  
                      
                    html+="<li><span onclick='getMyMindMap("+lastPage+")'>上一页</span></li>";  
                      
                    if(data<=showPage){  
                        for(var i=1;i<=data;i++){  
                            html+="<li><span onclick='getMyMindMap("+i+")'>"+i+"</span></li>";  
                        }  
                    }else{  
                        index=currentPage+showPage;  
                        x=currentPage;  
                        if(index>data){  
                            index=data+1;  
                            x=index-showPage;  
                        }  
                          
                        for(var i=x;i<index;i++){  
                            html+="<li><span onclick='getMyMindMap("+i+")'>"+i+"</span></li>";  
                        }  
                    }   
                      
                      
                    nextPage=currentPage;  
                    if(nextPage<data){  
                        nextPage++;  
                    }else if(nextPage==data){  
                        nextPage=data;  
                    }  
                      
                    html+="<li><span onclick='getMyMindMap("+nextPage+")'>下一页</span></li>";  
                    html+="<li><span onclick='getMyMindMap("+data+")'>尾页</span></li>";  
                    html+="</ul>";  
                    $("#jsmind_container").append(html);   
                      
                }  
                  
            },  
              
            error:function(e){  
                alert("网络连接失败!");  
            },  
              
        });  
    }