bootstrap自定義分頁

 

這個分頁是依靠bootstrap分頁的 ，須要引入boostrap源碼，

調用下面的方法便可 ，其中str 是指 前面頁單顯示的內容，測試的時候也能夠爲空，

size  表示總共有多少頁

pageNumber 表示當前顯示第幾頁

queryInfo  表示你查詢數據用哪一個方法，

具體效果以下：

function fenye(str,size,pageNumber,queryInfo){
    str+="<div class='dataTables_paginate paging_bootstrap pagination pagination-big'style='text-align:center'>";
    if(pageNumber>=1){
        str+="<ul><li class='prev disabled'><a >上一頁</a></li>";
    }else{
        str+="<ul><li class='prev'><a onclick='doQuery("+(-2)+")'>上一頁</a></li>";
    }
    
    var j=1;
    if(size<5){
        for(j;j<=size;j++){
            if(j==pageNumber){
                str+="<li class='active'><a >"+j+"</a></li>";
            }else{
                str+="<li><a onclick='doQuery("+j+")'>"+j+"</a></li>";
            }
         }
    }else{
        console.log(pageNumber);
        console.log(size);
        if(pageNumber-3<0){
            for(j;j<5;j++){
                if(j==pageNumber){
                    str+="<li class='active'><a >"+j+"</a></li>";
                }else{
                    str+="<li><a onclick='"+queryInfo+"("+j+")'>"+j+"</a></li>";
                }
             }
            str+="<li class='active'><a >...</a></li>";
            str+="<li><a onclick='"+queryInfo+"("+size+")'>"+size+"</a></li>";
        }else if(pageNumber+3>size){
            str+="<li><a onclick='"+queryInfo+"("+1+")'>"+1+"</a></li>";
            str+="<li class='active'><a >...</a></li>";
            var temp=size-3;
            for(var j=1;j<5;j++){
                if(temp==pageNumber){
                    str+="<li class='active'><a >"+temp+"</a></li>";
                }else{
                    str+="<li><a onclick='"+queryInfo+"("+temp+")'>"+temp+"</a></li>";
                }
                temp++;
             }
        }else{
            var temp=pageNumber-3;
        
            for(var i=0;i<2;i++){
                temp++;
                str+="<li><a onclick='"+queryInfo+"("+temp+")'>"+temp+"</a></li>";                        
            }
            str+="<li class='active'><a >"+pageNumber+"</a></li>";
            temp=pageNumber;
            for(var i=0;i<2;i++){
                temp++;
                str+="<li><a onclick='"+queryInfo+"("+temp+")'>"+temp+"</a></li>";
            }
            str+="<li class='active'><a >...</a></li>";
            str+="<li><a onclick='"+queryInfo+"("+size+")'>"+size+"</a></li>";
        }
        
    }