jquery+ajax实现分页

var curPage = 1; //当前页码 
	var total,pageSize,totalPage; //总记录数,每页显示数,总页数
	getData(1);
	$("#pagecount").on('click','span a',function(){
		var rel = $(this).attr("rel");
		if(rel){
			getData(rel);
		}
	});
	function getData(page){ 
		$.ajax({
			url:ThinkPHP['MODULE']+'/Votesubject/getVotesubjectList',
			type:'POST',
			data: {'pageNum':page-1},
			beforeSend:function(){
				
			},
			success:function(json){
				// console.log(json);
				total = json.total; //总记录数
				pageSize = json.pageSize; //每页显示条数
				curPage = page; //当前页
				totalPage = json.totalPage; //总页数
				var ul=$('.theme_body').find('*').remove();
				string='';
				$.each(json.list,function(index,array){ //遍历json数据列
					string+='';
					
				});
				$('.theme_body').append(string);
				
			},
			complete:function(){ //生成分页条
				getPageBar();
			},
			error:function(){
				alert("数据加载失败");
			}
		});
	}
	//获取分页条
function getPageBar(){
	$("#pagecount").find('*').remove();
	//页码大于最大页数
	if(curPage>totalPage) curPage=totalPage;
	//页码小于1
	if(curPage<1) curPage=1;
	pageStr = "<span>共"+total+"条</span><span>"+curPage+"/"+totalPage+"</span>";
	
	//如果是第一页
	if(curPage==1){
		pageStr += "<span>首页</span><span>上一页</span>";
	}else{
		pageStr += "<span><a href='javascript:void(0)' rel='1'>首页</a></span><span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>";
	}
	
	//如果是最后页
	if(curPage>=totalPage){
		pageStr += "<span>下一页</span><span>尾页</span>";
	}else{
		pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>下一页</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a></span>";
	}	
	$("#pagecount").append(pageStr);
}

  css样式

<style>
.pagecount{
    text-align: center;
    margin-bottom: 5px;
    padding:15px 15px 20px 0;
}
.pagecount span{
	display: inline-block;
    background: #ddd;
    margin:0 0 0 5px;
    width:40px;
    text-align: center;
    padding:2px 8px 2px 8px;
    border:1px solid #eee;
    color: #666;
}
.pagecount span a{
	color:#333;
}
.pagecount span a:hover{
	text-decoration: underline;
}
	
</style>

  html前端

<ul class="theme_body"></div><div id="pagecount"class="pagecount"></div>

后台数据处理

public function getVotesubjectList(){
        if(IS_AJAX){
            $page=I('post.pageNum');//当前页
            $Votesubject=D('Votesubject');
            $total =$Votesubject->count();//总记录数
            $pageSize = 1; //每页显示数
            $totalPage = ceil($total/$pageSize); //总页数
            $startPage = $page*$pageSize; //开始记录

            $limit="$startPage,$pageSize";
            //构造数组
            $arr['total'] = $total;
            $arr['pageSize'] = $pageSize;
            $arr['totalPage'] = $totalPage;
            $list=$Votesubject->getList($limit);
            $arr['list']=$list;
            $this->ajaxReturn($arr);

        }
        else{

        }
    }

说明:后台我用的是thinkphp框架

posted @ 2016-12-23 14:58  双木君  Views(31957)  Comments(0Edit  收藏  举报