recherche

Maison  >  Article  >  interface Web  >  Implémentation simple de l'effet de pagination sans rafraîchissement Ajax

Implémentation simple de l'effet de pagination sans rafraîchissement Ajax

韦小宝
韦小宝original
2018-01-01 19:40:172029parcourir

Cet article présente principalement en détail le code pour implémenter simplement l'effet de pagination sans rafraîchissement Ajax. Il a certaines références et valeurs pour l'apprentissage d'Ajax. Les amis qui sont intéressés par Ajax peuvent se référer à

Ajax Pas d'actualisation. effet de pagination, le code suivant implémente 


<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Ajax无刷新分页效果</title>

 <script type="text/javascript">
 function showpage(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
  if (xhr.readyState == 4) {
   document.getElementById("result").innerHTML = xhr.responseText;
  }
  }

  xhr.open(&#39;get&#39;,url);
  xhr.send(null);
 }

 window.onload = function () {
  showpage(&#39;page.php&#39;);
 }
 </script>
</head>
<body>
  <h2 style="text-align: center">Ajax无刷新分页效果</h2>
  <p id="result"></p>
</body>
</html>


Le code de pagination trouvé en ligne, disponible pour des tests personnels ~


/*
* Created on 2011-07-28
* Author : LKK , http://lianq.net
* 使用方法：
require_once(&#39;mypage.php&#39;);
$result=mysql_query("select * from mytable", $myconn);
$total=mysql_num_rows($result); //取得信息总数
pagepide($total,10); //调用分页函数

//数据库操作
$result=mysql_query("select * from mytable limit $sqlfirst,$shownu", $myconn);
while($row=mysql_fetch_array($result)){
...您的操作
}
echo $pagecon; //输出分页导航内容
*/

//if(!function_exists("pagepide")){
#$total 信息总数
#$shownu 显示数量,默认20
#$url 本页链接
 function pagepide($total,$shownu=20,$url=&#39;&#39;){

#$page 当前页码
#$sqlfirst mysql数据库起始项
#$pagecon 分页导航内容
 global $page,$sqlfirst,$pagecon,$_SERVER;
 $GLOBALS["shownu"]=$shownu;

 if(isset($_GET[&#39;page&#39;])){
  $page=$_GET[&#39;page&#39;];
 }else $page=1;

#如果$url使用默认,即空值,则赋值为本页URL
 if(!$url){ $url=$_SERVER["REQUEST_URI"];}

#URL分析
 $parse_url=parse_url($url);
 @$url_query=$parse_url["query"]; //取出在问号?之后内容
 if($url_query){
  $url_query=preg_replace("/(&?)(page=$page)/","",$url_query);
  $url = str_replace($parse_url["query"],$url_query,$url);
  if($url_query){
  $url .= "&page";
  }else $url .= "page";
 }else $url .= "?page";

#页码计算
 $lastpg=ceil($total/$shownu); //最后页,总页数
 $page=min($lastpg,$page);
 $prepg=$page-1; //上一页
 $nextpg=($page==$lastpg ? 0 : $page+1); //下一页
 $sqlfirst=($page-1)*$shownu;

#开始分页导航内容
 $pagecon = "显示第 ".($total?($sqlfirst+1):0)."-".min($sqlfirst+$shownu,$total)." 条记录，共 <B>$total</B> 条记录";
 if($lastpg<=1) return false; //如果只有一页则跳出

// if($page!=1) $pagecon .=" <a href=&#39;$url=1&#39;>首页</a> "; else $pagecon .=" 首页 ";
// if($prepg) $pagecon .=" <a href=&#39;$url=$prepg&#39;>前页</a> "; else $pagecon .=" 前页 ";
// if($nextpg) $pagecon .=" <a href=&#39;$url=$nextpg&#39;>后页</a> "; else $pagecon .=" 后页 ";
// if($page!=$lastpg) $pagecon.=" <a href=&#39;$url=$lastpg&#39;>尾页</a> "; else $pagecon .=" 尾页 ";

 if($page!=1) $pagecon .=" <a href=&#39;javascript:showpage(\"$url=1\")&#39;>首页</a> "; else $pagecon .=" 首页 ";
 if($prepg) $pagecon .=" <a href= &#39;javascript:showpage(\"$url=$prepg\")&#39;>前页</a> "; else $pagecon .=" 前页 ";
 if($nextpg) $pagecon .=" <a href= &#39;javascript:showpage(\"$url=$nextpg\")&#39;>后页</a> "; else $pagecon .=" 后页 ";
 if($page!=$lastpg) $pagecon.=" <a href= &#39;javascript:showpage(\"$url=$lastpg\")&#39;>尾页</a> "; else $pagecon .=" 尾页 ";

#下拉跳转列表,循环列出所有页码
// $pagecon .="　到第 <select name=&#39;topage&#39; size=&#39;1&#39; onchange=&#39;window.location=\"$url=\"+this.value&#39;>\n";
 $pagecon .="　到第 <select name=&#39;topage&#39; size=&#39;1&#39; onchange=&#39;showpage(\"$url=\"+this.value)&#39;>\n";
 for($i=1;$i<=$lastpg;$i++){
  if($i==$page) $pagecon .="<option value=&#39;$i&#39; selected>$i</option>\n";
  else $pagecon .="<option value=&#39;$i&#39;>$i</option>\n";
 }
 $pagecon .="</select> 页，共 $lastpg 页";

 return $page;
 }
//}else die(&#39;pagepide()同名函数已经存在!&#39;);


Ce qui suit est un simple affichage de pagination que j'ai réalisé moi-même


<?php

 header("Content-type:text/html; charset=utf-8");
 $link = mysqli_connect(&#39;localhost&#39;,&#39;root&#39;,&#39;123&#39;,&#39;good&#39;);
if (!$link)
{
 die("连接错误: " . mysqli_connect_error());
}

$sql = "SELECT * FROM ecs_category";
$qry = mysqli_query($link,$sql);
$total = mysqli_num_rows($qry);
$per = 10;

$page = pagepide($total,$per);

$sql = "SELECT cat_id,cat_name FROM category limit $sqlfirst,$shownu";
 $result = mysqli_query($link,$sql);

 //$goods = mysqli_fetch_all($result,MYSQLI_ASSOC);

 //mysqli_free_result($result);

echo <<<eof
 <style type="text/css">
 table{width:500px;margin:auto;border: 1px solid black; border-collapse:collapse;text-align:center;}
 td{border: 1px solid black;}
 </style>
 <table>
  <tr><td>序号</td><td>商品编号</td><td>商品类型</td></tr>
eof;

 $num = ($page - 1) * $per;
// foreach ($goods as $k => $v) {
 while($goods = mysqli_fetch_assoc($result)){
 echo "<tr>";
 echo "<td>".++$num."</td>";
 echo "<td>$goods[cat_id]</td>";
 echo "<td>$goods[cat_name]</td>";
 echo "</tr>";
 }

 echo "<tr><td colspan=&#39;3&#39;>$pagecon</td></tr>";
 echo "</table>";


Implémentation simple de leffet de pagination sans rafraîchissement Ajax

La page sautera sans être actualisée, l'URL ne changera pas et vous pourrez voir l'interaction des données du site Web

Implémentation simple de leffet de pagination sans rafraîchissement Ajax

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Recommandations associées :

Méthode de mise en œuvre de l'image de téléchargement et de la fonction d'aperçu Ajax

Méthode simple de téléchargement asynchrone Ajax

AJAX vérifie si le nom d'utilisateur est unique

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Résoudre le problème de l'invite de téléchargement de fichiers AjaxSubmit pour télécharger des fichiers sous IEArticle suivant：Résoudre le problème de l'invite de téléchargement de fichiers AjaxSubmit pour télécharger des fichiers sous IE

Articles Liés

Voir plus