Maison > Article > interface Web > Explication détaillée des étapes pour implémenter une requête de pagination de données avec ajax

Explication détaillée des étapes pour implémenter une requête de pagination de données avec ajax

php中世界最好的语言original: 2018-04-02 14:56:442422parcourir

Cette fois, je vais vous donner une explication détaillée des étapes pour implémenter une requête de données de pagination avec ajax. Quelles sont les précautions pour implémenter une requête de données de pagination avec ajax. Voici un cas pratique, prenons un. regarder.

Utilisez ajax pour interroger la base de données et paginer les données de la requête pour votre référence. Le contenu spécifique est le suivant

Code de la page principale

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
.dangqian{ background-color:#69F}
</style>
</head>
<body>
<p>
<input type="text" id="key" />
<input type="button" value="查询" id="chaxun" />
</p>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
 <tr>
  <td>代号</td>
  <td>名称</td>
  <td>父级代号</td>
 </tr>
 
 <tbody id="nr">
 
 </tbody> 
</table>
<p id="xinxi">
</p>
</body>

code js

<script type="text/javascript">
var page = 1; //当前页 定义一个变量 当前页
Load(); //加载数据
LoadXinXi(); //加载分页信息
//查询
$("#chaxun").click(function(){
  page = 1;
  Load(); //加载数据
  LoadXinXi(); //加载分页信息
 })
function Load()
{
 var key = $("#key").val(); //查询条件
 
 $.ajax({
   url:"chuli.php",
   data:{page:page,key:key},
   type:"POST",
   dataType:"JSON",
   success: function(data){
     var str = "";
     for(var k in data)
     {
      str +="<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";
     }
     $("#nr").html(str);//把数据返回表格
    }
  });
}
functionLoadXinXi()
{
 var str = "";
 var minys = 1;
 var maxys = 1;
 var key = $("#key").val();
 
 //查总页数
 $.ajax({
   async:false,
   url:"zys.php",
   data:{key:key},
   type:"POST",
   dataType:"TEXT",
   success: function(d){
     maxys = d;
    }
  });
 
 str += "<span>总共："+maxys+"页</span>  ";
 str += "<span id=&#39;prev&#39;>上一页</span>";
 
 for(var i=page-2;i<page+3;i++)
 {
  if(i>=minys && i<=maxys)
  {
   if(i==page)
   {
    str += "<span class=&#39;dangqian&#39; bs=&#39;"+i+"&#39;>"+i+"</span>  ";
   }
   else
   {
    str += "<span class=&#39;list&#39; bs=&#39;"+i+"&#39;>"+i+"</span>  ";
   }
  
  }
 }
  
 str += "<span id=&#39;next&#39;>下一页</span>"; 
 
 $("#xinxi").html(str);
 
 //给上一页添加点击事件
 $("#prev").click(function(){
   page = page-1;
   if(page<1)
   {
    page=1;
   }
   Load(); //加载数据
   LoadXinXi(); //加载分页信息
  })
 //给下一页加点击事件
 $("#next").click(function(){
   page = page+1;
   if(page>maxys)
   {
    page=maxys;
   }
   Load(); //加载数据
   LoadXinXi(); //加载分页信息
  })
 //给中间的列表加事件
 $(".list").click(function(){
   page = parseInt($(this).attr("bs"));
   Load(); //加载数据
   LoadXinXi(); //加载分页信息
  })
}
</script>

Traitement page 1

<?php
include("DBDA.class.php");
$db = new DBDA();
$key = $_POST["key"];
$num = 20;
$sql = "select count(*) from chinastates where areaname like &#39;%{$key}%&#39;";
$zts = $db->StrQuery($sql);
echo ceil($zts/$num);

Traitement page 2

<?php
include("DBDA.class.php");
$db = new DBDA();
$page = $_POST["page"];
$key = $_POST["key"];
$num = 20;
$tiao = ($page-1)*$num;
$sql = "select * from chinastates where areaname like &#39;%{$key}%&#39; limit {$tiao},{$num}";
echo $db->JSONQuery($sql);

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez faire attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

JS implémente l'actualisation partielle AJAX (avec code)

Explication détaillée des étapes de la requête inter-domaines AJAX JSONP pour obtenir des données JSON ( Code ci-joint)

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：Ajax réalise le concept le plus élémentaire de liaison à trois niveauxArticle suivant：Ajax réalise le concept le plus élémentaire de liaison à trois niveaux

Articles Liés

Voir plus