PHP+jquery+ajax implements paging

This article mainly introduces the paging implementation of PHP jquery ajax, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

HTML

<div id="list"> 
 <ul></ul> 
</div> 
<div id="pagecount"></div>

CSS

#list{width:680px; height:530px; margin:2px auto; position:relative} 
#list ul li{float:left;width:220px; height:260px; margin:2px} 
#list ul li img{width:220px; height:220px} 
#list ul li p{line-height:22px} 
#pagecount{width:500px; margin:10px auto; text-align:center} 
#pagecount span{margin:4px; font-size:14px} 
#list ul li#loading{width:120px; height:32px; border:1px solid #d3d3d3; 
position:absolute; top:35%; left:42%; text-align:center; background:#f7f7f7 
url(loading.gif) no-repeat 8px 8px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); 
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);}

jQuery

We declare the variables first, and the following variables will be used in the subsequent code.

var curPage = 1; //当前页码 
var total,pageSize,totalPage; //总记录数，每页显示数，总页数

Next, we customize a function: getData() to obtain the current page data. In the function, we use $.ajax() to send a POST asynchronous request to the background pages.php, and pass the current page number to the background in JSON format.

//获取数据 function getData(page){ 
 $.ajax({ 
 type: 'POST', 
 url: 'pages.php', 
 data: {'pageNum':page-1}, 
 dataType:'json', 
 beforeSend:function(){ 
 $("#list ul").append("<li id=&#39;loading&#39;>loading...</li>");//显示加载动画  }, 
 success:function(json){ 
 $("#list ul").empty();//清空数据区 
 total = json.total; //总记录数 
 pageSize = json.pageSize; //每页显示条数 
 curPage = page; //当前页 
 totalPage = json.totalPage; //总页数 
 var li = ""; 
 var list = json.list; 
 $.each(list,function(index,array){ //遍历json数据列 
 li += "<li><a href=&#39;#&#39;><img  src=&#39;"+array[&#39;pic&#39;]+"&#39; alt="PHP+jquery+ajax implements paging" >"+array[&#39;title&#39;] 
 +"</a></li>"; 
 }); 
 $("#list ul").append(li); 
 }, 
 complete:function(){ //生成分页条  getPageBar();
　　　　　　　　　　
　　　　　　　　　　　　当点击分页条中的分页链接时，调用getData(page)加载对应页码的数据。　　 
　　　　　　　　　　　　$("#pagecount span a").on(&#39;click&#39;,function(){ 
 　　　　　　 var rel = $(this).attr("rel"); 
 　　　　　　if(rel){ 
 　　　　 getData(rel); 
 　　　　　　} 
 　　　　　　　　 }); 
　　 }, 
 error:function(){ 
 alert("数据加载失败"); 
 } 
 }); 
}

After the request is successful and the data is returned, the corresponding data is attached to the variable, and the returned product data list is displayed in a loop to the corresponding container #list ul. When the data is completely loaded, call the paging bar function getPageBar() to generate a paging bar.

//获取分页条 function getPageBar(){ 
 //页码大于最大页数 
 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=&#39;javascript:void(0)&#39; rel=&#39;1&#39;>首页</a></span> 
 <span><a href=&#39;javascript:void(0)&#39; rel=&#39;"+(curPage-1)+"&#39;>上一页</a></span>"; 
 } 
   
 //如果是最后页 
 if(curPage>=totalPage){ 
 pageStr += "<span>下一页</span><span>尾页</span>"; 
 }else{ 
 pageStr += "<span><a href=&#39;javascript:void(0)&#39; rel=&#39;"+(parseInt(curPage)+1)+"&#39;> 
 下一页</a></span><span><a href=&#39;javascript:void(0)&#39; rel=&#39;"+totalPage+"&#39;>尾页</a>  
 </span>"; 
 } 
   
 $("#pagecount").html(pageStr); 
}

Finally, when the page is loaded for the first time, we load the first page of data, which is getData(1),

$(function(){  
 getData(1); 
   
});

PHP

pages .php receives each ajax request for the front-end page, obtains data from the mysql database based on the submitted page number pageNum value, calculates the total number of records and total pages, reads the data list under the corresponding page number, and formats the final result in JSON format Return to the front-end page.

include_once('connect.php'); //连接数据库，略过，具体请下载源码查看   
  $page = intval($_POST['pageNum']); //当前页    $result = mysql_query("select id from food"); 
$total = mysql_num_rows($result);//总记录数 $pageSize = 6; //每页显示数 $totalPage = ceil($total/$pageSize); //总页数 
   $startPage = $page*$pageSize; //开始记录 //构造数组 $arr['total'] = $total; 
$arr['pageSize'] = $pageSize; 
$arr['totalPage'] = $totalPage; 
$query = mysql_query("select id,title,pic from food order by id asc limit  
$startPage,$pageSize"); //查询分页数据 while($row=mysql_fetch_array($query)){ 
 $arr['list'][] = array( 
 'id' => $row['id'], 
 'title' => $row['title'], 
 'pic' => $row['pic'], 
 ); 
} 
echo json_encode($arr); //输出JSON数据

Finally, attach the Mysql table structure

CREATE TABLE IF NOT EXISTS `food` ( 
 `id` int(11) NOT NULL AUTO_INCREMENT,  
 `title` varchar(100) NOT NULL, 
 `pic` varchar(255) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

cropper php ajax implements uploading avatars

php implements socket push technology

The above is the detailed content of PHP+jquery+ajax implements paging. For more information, please follow other related articles on the PHP Chinese website!