suchen

Heim >Web-Frontend >js-Tutorial >Ajax implementiert eine Paging-Abfrage, ohne die Seite zu aktualisieren

Ajax implementiert eine Paging-Abfrage, ohne die Seite zu aktualisieren

php中世界最好的语言
php中世界最好的语言Original
2018-04-02 10:39:571832Durchsuche

Dieses Mal werde ich Ihnen vorstellen, wie Sie eine Paging-Abfrage implementieren, ohne die Seite über Ajax zu aktualisieren. Was sind die Vorsichtsmaßnahmen für die Implementierung einer Paging-Abfrage, ohne die Seite über Ajax zu aktualisieren? Werfen wir einmal einen Blick.

Anforderungen:

Um eine große Menge an Informationen in der Datenbank zu erhalten und auf der Seite anzuzeigen, müssen Seitenabfragen durchgeführt werden verwendet;

Wenn Sie Ajax nicht verwenden, sondern andere Methoden verwenden, müssen Sie die Seite auf jeden Fall aktualisieren, und der Benutzergesundheitstest wird sehr schlecht sein.

Also ist es am besten um Ajax zum Schreiben von Paging-Abfragen zu verwenden;

1. Suchen Sie zuerst eine Tabelle mit vielen Daten!

Eine einfache Tabelle

Code, Einführung des JQuery-Pakets:

<script src="jquery-1.11.2.min.js"></script>

Schreiben Sie a Tabelle mit unserem Codenamen und Namen: 

<table class="table table-striped">
 <thead>
 <tr>
 <td>代号</td>
 <td>名称</td>
 <td>操作</td>
 </tr>
 </thead>
 <tbody id="td">
 </tbody>
</table>

Das ist ganz einfach, kein Problem!

2. Legen Sie eine aktuelle Seite fest und definieren Sie eine Variable als 1 (erste Seite): 

 var page = 1;
 //当前页，默认等于1

3. Schreiben wir die erste Methode: Sie müssen Ajax verwenden. Diese Methode dient hauptsächlich als Abfrage und Paging: 

function load()
 {
 $.ajax({
  url: "jiazai.php",
// 显示所有的数据不用写data
  data:{page:page},
//当前页记得传过去
  type:"POST",
  dataType: "TEXT",
  success: function (data) {
  }
 });
 }

4. Schreiben Sie die Verarbeitungsseite, auf der die Daten angezeigt werden Es gibt viel zu überspringen. Es gibt Daten und die Anzahl der Daten, die Sie anzeigen möchten: 

<?php
include ("db.class.php");
$db = new db();
$page=$_POST["page"];
//去当前页page
$num = 3;
//每页显示几条
$tg = ($page-1)*3;//跳过几条
$sql = "select * from min limit {$tg},{$num}";
//limit:两个参数，第一个是跳过多少条，第二个是取多少条
echo $db->Query($sql);

Nachdem Sie den ersten Schritt abgeschlossen haben, schauen wir uns das Bild an:

Datenimplementierung anzeigen!

Okay, drei Daten pro Seite wurden zuerst implementiert (ich habe Bookstrap verwendet, um die Webseite zu verschönern, damit die Seite so aussieht, wie bereits erwähnt)

5. Seiteninformationen anzeigen, eine Methode schreiben, zuerst Ajax verwenden, um die Gesamtzahl der Seiten zu erhalten: 

function loadfenye()
 {
 var s = "";
 //用于接收
 var xiao = 1;
// 最大页
 var da = 1;
// 最小页
 $.ajax({
 async:false,
//  做成同步
 url:"zys.php",
 dataType:"TEXT",
 success:function(data){
 da = data;
 //最大页数
  }
});
 }

Als nächstes erstellen Sie eine PHP-Seite, um die Gesamtzahl der Seiten abzufragen: 

<?php
//查询总页数
include ("db.class.php");
$db = new db();
$sql = "select count(*) from min";
$zts = $db->strquery($sql);
//总条数
echo ceil($zts/3);
//ceil向上取整

Okay, insgesamt. Die Anzahl der Seiten wurde ermittelt. Kommen Sie zurück und beenden Sie das Schreiben der Paginierung: 

//加载分页信息方法
 function loadfenye()
 {
  var s = "";
  //用于接收
  var xiao = 1;
//  最大页
  var da = 1;
//  最小页
  $.ajax({
 async:false,
//   做成同步
 url:"zys.php",
 dataType:"TEXT",
 success:function(data){
  da = data;
  //最大页数，查到的最大页数交个默认的最大页数
   }
});
//加载上一页
  s += "<li><a>«</a></li>";
//  加载分页列表
for(i=page-4;i<page+5;i++)
{
 //i代表列表的页数
 if(i>=xiao && i<=da)
 {
  s += " <li><a>"+i+"</a></li>"
 }
}
  //  加载下一页
  s += "<li><a>»</a></li>";
$("#fenye").html(s);
 }

Nachdem Sie dies geschrieben haben, schauen Sie sich das Bild an:

Die Paginierungsinformationen werden ebenfalls angezeigt. Es ist raus

6. Ändern wir die Hintergrundfarbe der standardmäßig ausgewählten Seite

Schauen Sie sich Bookstrap an; So ändern Sie die Hintergrundfarbe:

Natürlich gibt es einen zusätzlichen aktiven Stil, fügen wir ihn nach eigenem Ermessen hinzu 

if(i>=xiao && i<=da) {
  if (i == page) {
   s += " <li class=&#39;active&#39;><a>" + i + "</a></li>"
  }
  else {
   s += " <li><a>" + i + "</a></li>";
  }

Okay, schauen Sie mal:

Ja, kein Problem

7. Erstellen Sie ein Klickereignis auf der Seitenzahl, um zur Seitenzahl zu springen und die Daten anzuzeigen, und Aktualisieren Sie die Liste;

Fügen Sie zuerst eine Klasse zur Zahlenliste hinzu

s += " <li class=&#39;active list&#39;><a>" + i + "</a></li>"

Dann schreiben Sie die Methode: 

//给列表加上点击事件
  $(".list").click(function(){
   //改变当前页数
   //把点击的页数，扔给page（当前页）
   page = $(this).text();
//   page获取了当前页，重新加载以下方法
   //调用load方法
   load();
   //把加载数据封装成一个方法
   loadfenye();
   //加载分页信息方法
  })
 }

Wenn ich auf die fünfte Seite klicke:

Kein Problem

8 Seite, die erste ist die vorherige Seite. Klicken Sie auf Ereignis:

Fügen Sie zunächst der Liste auf der vorherigen Seite eine Klasse hinzu, um das Schreiben von Ereignissen zu erleichtern:

s += "<li class=&#39;sy&#39;><a>«</a></li>";

Klicken Sie hier auf Ereignis auf der vorherigen Seite: 

$(".sy").click(function(){
   //改变当前页
   if(page>1)
   {
    //如果不是第一页
    page = parseInt(page) - 1;
   }
   //   page获取了当前页，重新加载以下方法
   //调用load方法
   load();
   //把加载数据封装成一个方法
   loadfenye();
   //加载分页信息方法
  })

Klicken Sie auf Ereignis auf der nächsten Seite:

Gleiches wie oben: Fügen Sie der Liste eine Klasse hinzu, um das Schreiben von Ereignissen zu erleichtern:

s += "<li class=&#39;xy&#39;><a>»</a></li>"; 

下一页点击事件：

//下一页点击事件
  $(".xy").click(function(){
//   alert(da);
   if(page<da)
   {
    //如果不是第一页
    page = parseInt(page) + 1;
   }
   //   page获取了当前页，重新加载以下方法
   //调用load方法
   load();
   //把加载数据封装成一个方法
   loadfenye();
   //加载分页信息方法
  })

好，完美实现ajax分页查询；

8.再加一个按条件查询：

加上文本框：

<p>
 <input type="text" id="name"/>
 <input type="button" id="chaxun" value="查询"/>
</p>

来写点击事件：

//给查询加点击事件
 $("#chaxun").click(function(){
  //重新加载
  //调用load方法
  load();
  //把加载数据封装成一个方法
  loadfenye();
  //加载分页信息方法
 })

接下来我们需要改一下这两个方法：

ajax只需要把文本框的name传过去就好啦：

data:{page:page,name:name},
   type:"POST",
data:{name:name},
 type:"POST",

在处理页面，设置一个恒等的条件：

$tj = " 1=1 ";
if(!empty($_POST["name"]))
{
 $name = $_POST["name"];
 $tj = " name like '%{$name}%' ";
}

最后在sql语句后面调用就好啦

图：

页面不刷新的分页查询就欧克了；

源码：

显示页面：




 
 无标题文档
 
 <script src="jquery-1.11.2.min.js"></script>
 




显示数据

<p>
 <input type="text" id="name"/>
 <input type="button" id="chaxun" value="查询"/>
</p>



 
 
  
  
  
 
 
 
 
代号名称操作






    


 





  

   

    
    

   

   

   

   

    
   

  

 





<script>
 var page = 1;
 //当前页，默认等于1
 //调用load方法
 load();
 //把加载数据封装成一个方法
 loadfenye();
 //加载分页信息方法
 //给查询加点击事件
 $(&quot;#chaxun&quot;).click(function(){
  //重新加载
  //调用load方法
  load();
  //把加载数据封装成一个方法
  loadfenye();
  //加载分页信息方法
 })
 function loadfenye()
 {
  var s = "";
  //用于接收
  var name = $("#name").val();
  var xiao = 1;
//  最大页
  var da = 1;
//  最小页
  $.ajax({
 async:false,
//   做成同步
 url:"zys.php",
 data:{name:name},
 type:&quot;POST&quot;,
 dataType:"TEXT",
 success:function(data){
  da = data;
  //最大页数
   }
});
//加载上一页
  s += "<li class=&#39;sy&#39;><a>«</a></li>";
//  加载分页列表
for(var i=page-4;i<page+5;i++)
{
 //i代表列表的页数
 if(i>=xiao && i<=da) {
  if (i == page) {
   s += " <li class=&#39;active list&#39;><a>" + i + "</a></li>"
  }
  else {
   s += " <li class=&#39;list&#39;><a>" + i + "</a></li>";
  }
 }
}
  //  加载下一页
  s += "<li class=&#39;xy&#39;><a>»</a></li>";
$("#fenye").html(s);
//给列表加上点击事件
  $(".list").click(function(){
   //改变当前页数
   //把点击的页数，扔给page（当前页）
   page = $(this).text();
//   page获取了当前页，重新加载以下方法
   //调用load方法
   load();
   //把加载数据封装成一个方法
   loadfenye();
   //加载分页信息方法
  })
  //上一页点击事件
  $(&quot;.sy&quot;).click(function(){
   //改变当前页
   if(page&gt;1)
   {
    //如果不是第一页
    page = parseInt(page) - 1;
   }
   //   page获取了当前页，重新加载以下方法
   //调用load方法
   load();
   //把加载数据封装成一个方法
   loadfenye();
   //加载分页信息方法
  })
  //下一页点击事件
  $(".xy").click(function(){
//   alert(da);
   if(page<da)
   {
    //如果不是第一页
    page = parseInt(page) + 1;
   }
   //   page获取了当前页，重新加载以下方法
   //调用load方法
   load();
   //把加载数据封装成一个方法
   loadfenye();
   //加载分页信息方法
  })
 }
 function load()
 {
  var name = $("#name").val();
  $.ajax({
   url: "jiazai.php",
//  显示所有的数据不用写data
   data:{page:page,name:name},
   type:&quot;POST&quot;,
   dataType: "TEXT",
   success: function (data) {
    var str = "";
    var hang = data.split("|");
    //split拆分字符串
    for (var i = 0; i < hang.length; i++) {
     //通过循环取到每一行;拆分出列；
     var lie = hang[i].split("-");
     str = str +
      "<tr><td>"
      + lie[0] +
      "</td><td>"
      + lie[1] +
      "</td><td>" +
      "<button type=&#39;button&#39; class=&#39;btn btn-info sc&#39; ids=&#39;"+lie[0]+"&#39;>点击删除</button><button type=&#39;button&#39; class=&#39;btn btn-primary xq&#39; ids=&#39;"+lie[0]+"&#39;>查看详情</button>" +
      //ids里面存上主键值
      "</td></tr>";
    }
    $("#td").html(str);
    //找到td把html代码扔进去
    addshanchu();
    addxiangqing();
   }
  });
 }
 //给查看详情加事件
 function addxiangqing()
 {
  $(".xq").click(function(){
   $('#myModal').modal('show')
   //打开模态框
   var ids = $(this).attr("ids");
   $.ajax({
    url:"xiangqing.php",
    data:{ids:ids},
    dataType:"TEXT",
    type:"POST",
     success:function(data){
     //拆分
      var lie = data.split("^");
//      var str = "<p>代号:"+lie[0]+"</p><p>名称:"+lie[1]"</p>";
      //造字符串
      var str = "<p>代号："+lie[0]+"</p><p>名称："+lie[1]+"</p>";
      $("#nr").html(str);
   }
   });
   //在模态框里面要显示的内容
  })
 }
 //把删除事件封装成方法：
 function addshanchu()
 {
  //给删除按钮加上事件
  $(".sc").click(function () {
   var ids = $(this).attr("ids");
   $.ajax({
    url: "shanchu.php",
    data: {ids: ids},
    dataType: "TEXT",
    type: "POST",
    success: function (d) {
     if (d.trim() == "ok") {
      alert("删除成功");
      //调用加载数据的方法
      load();
     }
     else {
      alert("删除失败");
     }
    }
   });
  })
 }
</script>

查询总页数的页面：

<?php
//查询总页数
include ("db.class.php");
$db = new db();
$tj = " 1=1 ";
if(!empty($_POST["name"]))
{
 $name = $_POST["name"];
 $tj = " name like &#39;%{$name}%&#39; ";
}
$sql = "select count(*) from min WHERE {$tj} ";
$zts = $db->strquery($sql);
//总条数
echo ceil($zts/3);
//ceil向上取整

加载分页信息的页面：

<?php
include ("db.class.php");
$db = new db();
$page=$_POST["page"];
//去当前页page
$tj = " 1=1 ";
if(!empty($_POST["name"]))
{
 $name = $_POST["name"];
 $tj = " name like &#39;%{$name}%&#39; ";
}
$num = 3;
//每页显示几条
$tg = ($page-1)*3;//跳过几条
$sql = "select * from min where {$tj} limit {$tg},{$num}";
//limit:两个参数，第一个是跳过多少条，第二个是取多少条
$arr = $db->Query($sql);
//遍历
$str="";
foreach ($arr as $v)
{
 $str = $str.implode("-",$v)."|";
 //用-把$v拼起来,拼出来是1-红2-蓝,用|分割，拼出来是1-红|2-蓝|
}
$str = substr($str,0,strlen($str)-1);
//截取字符串：从第0个开始，截取它的长度-1
//strlen获取字符串长度
echo $str;

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何给使用Ajax返回的标签动态添加样式

ajax的校验功能怎样用SSM整合框架实现

Das obige ist der detaillierte Inhalt vonAjax implementiert eine Paging-Abfrage, ohne die Seite zu aktualisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php sql jquery ajax class JS 事件 li 数据库
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Schritte zum Implementieren von Paging- und Paging-Abfragefunktionen in AjaxNächster Artikel：Detaillierte Erläuterung der Schritte zum Implementieren von Paging- und Paging-Abfragefunktionen in Ajax

In Verbindung stehende Artikel

Mehr sehen