PHP+jquery+ajax implémente la pagination

Cet article présente principalement l'implémentation de la pagination avec PHP+jquery+ajax. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

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

Nous déclarons d'abord les variables, et les variables suivantes seront utilisées dans le code suivant.

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

Ensuite, nous personnalisons une fonction : getData() pour obtenir les données de la page actuelle. Dans la fonction, nous utilisons $.ajax() pour envoyer une requête asynchrone POST au fichier pages.php d'arrière-plan et transmettre le numéro de page actuel à l'arrière-plan au format JSON.

//获取数据 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;>"+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("数据加载失败"); 
 } 
 }); 
}

Une fois la demande réussie, les données seront renvoyées, les données correspondantes seront attachées à la variable et la liste des données du produit renvoyée sera affichée en boucle dans le conteneur correspondant #list ul . Lorsque les données sont complètement chargées, appelez la fonction de barre de pagination getPageBar() pour générer une barre de pagination.

//获取分页条 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); 
}

Enfin, lorsque la page est chargée pour la première fois, nous chargeons la première page de données, qui est getData(1),

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

PHP

pages.php reçoit chaque requête ajax pour la page frontale, obtient les données de la base de données mysql en fonction de la valeur pageNum du numéro de page soumis, calcule le nombre total d'enregistrements et le nombre total de pages, lit les données liste sous le numéro de page correspondant, et enfin Les résultats sont renvoyés sur la page front-end au format JSON.

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数据

Enfin, la structure des tables Mysql est jointe

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;

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun pour un contenu plus connexe. , veuillez faire attention au site Web PHP chinois !

Recommandations associées :

cropper+php+ajax implémente le téléchargement d'avatars

php implémente la technologie socket push

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!