当前位置: 移动技术网 > IT编程>网页制作>CSS > 原生Bootstrap实现动态分页(代码实例)

原生Bootstrap实现动态分页(代码实例)

2017年12月27日  | 移动技术网IT编程  | 我要评论

最近开发时需要动态显示分页页数,写了一个动态显示页数的算法。效果为动态显示当前页数以及后的页数,规定自己想要显示的页数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("网络连接失败!");  
            },  
              
        });  
    }  

\

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网