程序员一代码搬运工
【Java学习心得和Java学习技术个人总结】

bootstrap实现分页效果(只需控制条数,页数,和当前页数)

页面上:

<ul class=”pagination” id=”pagination”> </ul>

js

	$(document).ready(function() {
		if($("#pagination")){
			var pagecount = <%= locals.pagecount %>;
			var pagesize = <%= locals.pagesize %>;
			var currentpage = <%= locals.currentpage %>;
			var counts,pagehtml="";
			if(pagecount%pagesize==0){
				counts = parseInt(pagecount/pagesize);
			}else{
				counts = parseInt(pagecount/pagesize)+1;
			}
			//只有一页内容
			if(pagecount<=pagesize){pagehtml="";}
			//大于一页内容
			if(pagecount>pagesize){
				if(currentpage>1){
					pagehtml+= '<li><a href="/course/index/'+(currentpage-1)+'">上一页</a></li>';
				}
				for(var i=0;i<counts;i++){
					if(i>=(currentpage-3) && i<(currentpage+3)){
						if(i==currentpage-1){
							pagehtml+= '<li class="active"><a href="/course/index/'+(i+1)+'">'+(i+1)+'</a></li>';
						}else{
							pagehtml+= '<li><a href="/course/index/'+(i+1)+'">'+(i+1)+'</a></li>';
						}
						
					}
				}
				if(currentpage<counts){
					pagehtml+= '<li><a href="/course/index/'+(currentpage+1)+'">下一页</a></li>';
				}
			}
			$("#pagination").html(pagehtml);
		}
	});

具体参数,效果如下

page page2

 

赞(1)
未经允许不得转载:程序员一代码搬运工 » bootstrap实现分页效果(只需控制条数,页数,和当前页数)
分享到: 更多 (0)