BootStrap 分页

利用BootStrap 进行分页。

1.引用 文件

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all">
<script type="text/javascript" src="js/others/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/others/bootstrap.min.js"></script>

2.初始化

$(function() {
	if($("#pagination")){
		var pagecount = "${pagecount}";  //总行数
        var pagesize = 300;  //每页显示行数
        var currentpage = "${currentpage}";  //当前页码
        var counts,pagehtml=""; 
        
        if(pagecount%pagesize==0){  
            counts = parseInt(pagecount/pagesize);  
        }else{  
            counts = parseInt(pagecount/pagesize)+1;  
        }  
        if(pagecount<=pagesize){//只有一页内容
        	pagehtml="";
       	}else{    //大于一页内容pagechange
        	 pagehtml+= '<li οnclick="pagechange(1)"><a href="javascript:void(0)">首页</a></li>';
        	if(currentpage>1){  
                pagehtml+= '<li οnclick="pagechange('+(Number(currentpage)-1)+')"><a href="javascript:void(0)">上一页</a></li>';
            }  
            for(var i=0;i<counts;i++){  
                if(i>=(Number(currentpage) -5) && i<(Number(currentpage) + 5)){  
                    if(i==currentpage-1){  
                        pagehtml+= '<li class="active" οnclick="pagechange('+(i+1)+')"><a href="javascript:void(0)">'+(i+1)+'</a></li>';  
                    }else{  
                        pagehtml+= '<li οnclick="pagechange('+(i+1)+')"><a href="javascript:void(0)">'+(i+1)+'</a></li>';  
                    }  
                }  
            }  
            if(currentpage<counts){  
                pagehtml+= '<li οnclick="pagechange('+(Number(currentpage)+1)+')"><a href="javascript:void(0)">下一页</a></li>';
            }  
            pagehtml+='<li οnclick="pagechange('+counts+')"><a href="javascript:void(0)">末页</a></li><li><a>共 '+counts+' 页</a></li>';
        }  
        $("#pagination").html(pagehtml);  
    } 

3.函数

function pagechange(page){
	var time=$("#inputDate").val();
	location.href="getdata?time=time+"&page="+page;
}

4.DOM结构

<div style="width:100%;text-align:center">
	<ul class="pagination" id="pagination"></ul>  
</div>