recherche

Maison  >  Article  >  interface Web  >  Ajax implémente une requête de pagination sans actualiser la page

Ajax implémente une requête de pagination sans actualiser la page

php中世界最好的语言
php中世界最好的语言original
2018-04-02 10:52:161571parcourir

Cette fois, je vais vous proposer Ajax pour implémenter une requête de pagination sans actualiser la page. Quelles sont les précautions pour qu'Ajax implémente une requête de pagination sans actualiser la page. Prenons un cas pratique. regarde.

Aujourd'hui, nous allons utiliser ajax pour créer une pagination :

Implémenter la pagination Ajax :

Ajouter des conditions de requête si possible

  1. Trouver une table pour la pagination

  2. Ne pas utiliser la classe page pour la pagination

  3. La page n'a pas besoin d'être actualisée

  4. Données de chargement Ajax

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</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="50%" border="1" bordercolordark="0" bordercolorlight="0">
  <tr>
    <td>代号</td>
    <td>名称</td>
    <td>父级代号</td>
  </tr>
  <tbody id="neirong"><!--显示内容-->
  </tbody>
</table>
<p id="fenyexinxi">
</p>
</body>
<script type="text/javascript">
  var page = 1;//定个变量，当前要显示的页
  Load();//加载数据
  Loadfenyexinxi();//加载分页信息
  //查询
  $("#chaxun").click(function(){
    page = 1;
    Load();//加载数据
    Loadfenyexinxi();//加载分页信息
  })
  function Load()
  {
    var key = $("#key").val();//查询条件。用户输入的内容
    $.ajax({
      url:"chuli.php",
      data: {
      page: page,
      key: key
    },//传2个参数一当前页2关键字也就是查询条件
      type:"POST",
      dataType:"JSON",
      success: function(data){//匿名函数
          var str = "";//这个将来要放表格显示的
          for(var k in data)//通过K可以获得每一条数据
          {//加载数据完成
            str +="<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";//要显示的内容，代号、名称父级代号
          }
          $("#neirong").html(str);
      }
    });
  }
function Loadfenyexinxi()//分页信息
{
  var str = "";
  var minys = 1;//最小页数
  var maxys = 1;//最大页数
  var key = $("#key").val();//取关键字用于传到zys页面用
  $.ajax({
    async:false,
    type:"POST",
    url:"fenye.php",
    data:{key:key},
    dataType:"TEXT",
    success:function(d){
        maxys = d;
    }
  });
  str += "<span style=&#39;text-decoration:underline; cursor:pointer&#39;>总共："+maxys+"页</span> ";
  str += "<span id=&#39;prev&#39; style=&#39;text-decoration:underline; cursor:pointer&#39;>上一页</span>";
  for(var i=page-2;i<page+3;i++)
  {
    if(i>=minys && i<=maxys)
    {
      if(i==page)
      {
        str += "<span style=&#39;text-decoration:underline; cursor:pointer&#39; class=&#39;dangqian&#39; bs=&#39;"+i+"&#39;>"+i+"</span> ";
      }
      else
      {
        str += "<span style=&#39;text-decoration:underline; cursor:pointer&#39; class=&#39;list&#39; bs=&#39;"+i+"&#39;>"+i+"</span> ";
      }
    }
  }
  str += "<span style=&#39;text-decoration:underline; cursor:pointer&#39; id=&#39;next&#39;>下一页</span>";
  $("#fenyexinxi").html(str);
  $("#prev").click(function(){
      page = page-1;
      if(page<1)
      {
        page=1;
      }
      Load();
      Loadfenyexinxi();
    })
  $("#next").click(function(){
      page = page+1;
      if(page>maxys)
      {
        page=maxys;
      }
      Load();
      Loadfenyexinxi();
    })
  $(".list").click(function(){
      page = parseInt($(this).attr("bs"));
      Load();
      Loadfenyexinxi();
    })
}
</script>
</html>

Ce qui précède est cette page : test.php

<?php
include("DBDA.class.php");
$db = new DBDA();
//把上个页面的2个值传过来
$page = $_POST["page"];//当前页
$key = $_POST["key"];//条件，关键字
$num = 20;//定义，一页里多少条数据，
$tiaoshu = ($page-1)*$num;//$tiaoshu跳过多少条($page-1)*$num现在$num是20条
//写$SQL语句
$sql = "select * from chinastates where areaname like &#39;%{$key}%&#39; limit {$tiaoshu},{$num}";//根据关键字查like &#39;%{$tiaojian}%&#39;。
echo $db->JSONQuery($sql);

Ce ci-dessus est la page de traitement : chuli.php:

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

Ce qui précède est la page de pagination : fenye.php

Ce qui suit est notre effet d'affichage :

Lorsque vous cliquez sur la page suivante, 5 s'afficheront sous la page, et il y a deux pages à gauche et à droite de la page actuelle. Le nombre d'informations affichées sur chaque page peut être ajusté par vous-même.

La saisie de mots-clés dans la zone de texte ci-dessus affichera des informations pertinentes. C'est la pagination que nous effectuons en utilisant ajax.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'image et du texte de la requête de pagination ajax

Comment utiliser fileinput pour implémenter ajax asynchrone télécharger

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!

php ajax 异步
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：Une brève analyse de la compréhension des fermetures avec des exemplesArticle suivant：Une brève analyse de la compréhension des fermetures avec des exemples

Articles Liés

Voir plus