jQuery Ajax PHP Mysql implémentation de l'exemple de données d'affichage de pagination explication

jQuery Ajax PHP Mysql implémentation de l'exemple de données d'affichage de pagination explication_jquery

WBOY

Libérer： 2016-05-16 15:37:55

original

2124 Les gens l'ont consulté

Cet article utilise jQuery, combiné avec PHP et Mysql, pour expliquer comment obtenir l'effet de chargement de données Ajax à travers des exemples.

HTML

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

Copier après la connexion

Dans la page

, #list est utilisé pour afficher la liste des données, y compris les images et les titres des produits à afficher dans cet exemple, et #pagecount est utilisé pour afficher la barre de pagination, c'est-à-dire la page précédente et la page suivante dans cet exemple.
Bien sûr, n'oubliez pas de précharger le fichier de la bibliothèque jquery dans le head.
CSS
Nous devons organiser les images du produit et définir le style de la barre de pagination. Bien entendu, la conception de ces styles peut être définie en fonction des données après une lecture réussie. Dans cet exemple, nous collons d'abord le code 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

Copier après la connexion

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; //总记录数，每页显示数，总页数

Copier après la connexion

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='loading'>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='#'><img src='"+array['pic']+"'>"+array['title'] 
    +"</a></li>"; 
   }); 
   $("#list ul").append(li); 
  }, 
  complete:function(){ //生成分页条 
   getPageBar(); 
  }, 
  error:function(){ 
   alert("数据加载失败"); 
  } 
 }); 
}

Copier après la connexion

Une fois la demande réussie et les données renvoyées, les données correspondantes sont attachées à la variable et la liste des données du produit renvoyée est 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='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").html(pageStr); 
}

Copier après la connexion

Enfin, lorsque la page est chargée pour la première fois, nous chargeons les données de la première page, qui sont getData(1). Lorsque l'on clique sur le lien de pagination dans la barre de pagination, getData(page) est appelé pour charger les données. correspondant au numéro de page. Nous avons pré-intégré le numéro de page numérique dans l'attribut rel de la connexion de tournage de page via la fonction getPageBar().

$(function(){ 
 getData(1); 
 $("#pagecount span a").live('click',function(){ 
  var rel = $(this).attr("rel"); 
  if(rel){ 
   getData(rel); 
  } 
 }); 
});

Copier après la connexion

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 la liste de données sous le numéro de page correspondant, et affiche le résultat final en JSON Le format est renvoyé à la page front-end.

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

Copier après la connexion

À ce moment-là, revenez à la page d'accueil et vous verrez que les données ont été paginées avec des points-virgules. Cliquez sur "Page suivante" pour voir si c'est l'effet que vous souhaitez. Consultez la DÉMO que vous pouvez personnaliser. le style de la barre de pagination. Je vous l'ai donné. C'est le style le plus basique.
Enfin, la structure de la table Mysql est jointe et la table de données est incluse dans le package de code source téléchargé ^-^ Tout est prêt pour vous.

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;

Copier après la connexion

Ce qui précède est un exemple de jQuery Ajax PHP Mysql implémentant les données d'affichage de pagination. L'effet de pagination Ajax facilite le chargement des données de votre site Web. J'espère que cet article sera utile à l'apprentissage de tout le monde.