Explication détaillée des étapes pour implémenter une requête de pagination de données avec ajax-js tutoriel-php.cn

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

php中世界最好的语言

Libérer： 2018-04-02 14:56:44

original

2421 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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);

Copier après la connexion

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);

Copier après la connexion

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!