Ajax implements paging query function-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Ajax implements paging query function

Mar 31, 2018 pm 04:11 PM

ajax accomplish Query function

This time I will bring you the ajax implementation of the paging query function. What are the precautions for the ajax implementation of the paging query function? The following is a practical case, let's take a look.

The specific code of ajax paging query function is for your reference. The specific content is as follows

The displayed effect is as follows:

The code to achieve the effect is as follows:

1.fenye.php

&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;无标题文档&lt;/title&gt;
&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;../bootstrap-3.3.7-dist/css/bootstrap.min.css&quot; rel=&quot;external nofollow&quot; /&gt;
&lt;script src=&quot;../jquery-3.2.0.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../bootstrap-3.3.7-dist/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;style type=&quot;text/css&quot;&gt;
.list:hover{ cursor:pointer}
#prev:hover{ cursor:pointer}
#next:hover{ cursor:pointer}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p class=&quot;page-header&quot;&gt;
&lt;h1&gt;AJAX分页&lt;/h1&gt;
&lt;/p&gt;
&lt;p&gt;名称：&lt;input type=&quot;text&quot; id=&quot;name&quot; /&gt; &lt;button type=&quot;button&quot; class=&quot;btn btn-info btn-xs&quot; id=&quot;chaxun&quot;&gt;查询&lt;/button&gt;&lt;/p&gt;
&lt;br /&gt;
&lt;table width=&quot;100%&quot; class=&quot;table table-hover&quot;&gt;
 &lt;tr&gt;
  &lt;td&gt;代号&lt;/td&gt;
  &lt;td&gt;名称&lt;/td&gt;
 &lt;/tr&gt;
 
 &lt;tbody id=&quot;shuju&quot;&gt;
  
 &lt;/tbody&gt;
 
&lt;/table&gt;
&lt;br /&gt;
&lt;ul class=&quot;pagination&quot; id=&quot;xinxi&quot;&gt;&lt;/ul&gt;
&lt;/body&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
//代表当前页
var page = 1;
//每页显示几条
var num = 5;
//加载数据
Load();
//加载分页列表
LoadFenYe();
//加载数据的方法
function Load()
{
 var name = $("#name").val();
 $.ajax({
  url:"chuli.php",
  data:{page:page,num:num,name:name},
  type:"POST",
  dataType:"JSON",
  success: function(data){
   var str = "";
   for(var k in data)
   {
    str = str + "&lt;tr&gt;&lt;td&gt;"+data[k].code+"&lt;/td&gt;&lt;td&gt;"+data[k].nno+"&lt;/td&gt;&lt;/tr&gt;";
   }
   $("#shuju").html(str);
  } 
 });
}
//加载分页信息
function LoadFenYe()
{
 //存储所有分页信息的代码
 var s = "";
 var name = $("#name").val();
 //加载上一页
 s = "&lt;li&gt;&lt;a id=&#39;prev&#39;&gt;«&lt;/a&gt;&lt;/li&gt;";
 
 //加载列表
 var zts = 0;
 $.ajax({
  async:false,
  data:{name:name},
  type:"POST",
  url:"zongtiaoshu.php",
  dataType:"TEXT",
  success: function(data){
   zts = data;
  }
 });
 
 //求总页数
 var zys = Math.ceil(zts/num);
 //为了防止出错
 page = parseInt(page);
 for( var i=page-2;i&lt;page+3;i++)
 {
  if(i&gt;0 &amp;&amp; i&lt;=zys)
  {
   if(i==page)
   {
    s = s+&quot;&lt;li class=&#39;active&#39;&gt;&lt;a ys=&#39;&quot;+i+&quot;&#39; class=&#39;dangqian&#39;&gt;"+i+"&lt;/a&gt;&lt;/li&gt;";
   }
   else
   {
    s = s+"&lt;li&gt;&lt;a ys=&#39;&quot;+i+&quot;&#39; class=&#39;list&#39;&gt;"+i+"&lt;/a&gt;&lt;/li&gt;";
   }
   
  }
 }
 
 //加载下一页
 s = s+"&lt;li&gt;&lt;a id=&#39;next&#39;&gt;»&lt;/a&gt;&lt;/li&gt;";
 
 $("#xinxi").html(s);
 
 //给上一页加事件
 $("#prev").click(function(){
  page = parseInt(page);
  if(page&gt;1)
  {page--;}
  
  //重新加载数据
  Load();
  //重新加载分页信息
  LoadFenYe();
 })
 //给下一页加事件
 $("#next").click(function(){
  page = parseInt(page);
  if(page&lt;zys)
  {page++;}
  
  //重新加载数据
  Load();
  //重新加载分页信息
  LoadFenYe();
 })
 
 //给列表加事件
 $(".list").click(function(){
  page = parseInt($(this).attr("ys"));
  //重新加载数据
  Load();
  //重新加载分页信息
  LoadFenYe();
 })
}
$("#chaxun").click(function(){
 //重新加载数据
 Load();
 //重新加载分页信息
 LoadFenYe();
})
&lt;/script&gt;
&lt;/html&gt;

Copy after login

2.chuli.php

&lt;?php
$page = $_POST[&quot;page&quot;];
$num = $_POST[&quot;num&quot;];
$name = $_POST[&quot;name&quot;];
require &quot;../DBDA.class.php&quot;;
$db = new DBDA();
$tguo = ($page-1)*$num;
$sql = &quot;select * from nation where nno like &#39;%{$name}%&#39; limit {$tguo},{$num}&quot;;
echo $db-&gt;jsonquery($sql);

Copy after login

3.zongtiaoshu.php

&lt;?php
$name = $_POST[&quot;name&quot;];
require&quot;../DBDA.class.php&quot;;
$db = new DBDA();
$sql =&quot;select count(*) from nation where nno like &#39;%{$name}%&#39;&quot;;
echo $db-&gt;strquery($sql);

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!