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框架


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM