Detailed explanation of the steps to implement paging and paging query functions in ajax

This time I will bring you a detailed explanation of the steps to implement the paging and paging query functions with ajax. What are the precautions for ajax to implement the paging and paging query functions. The following is a practical case, let's take a look.

First of all, in order to make the page neat and beautiful, I used bootstrap, and I need to import the required file package

<link href="dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<script src="../jquery/jquery-1.11.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>

The following is The content displayed on the page

<p><input type="text" id="name" /> <input type="button" value="查询" id="chaxun" /></p>
<br />
<table class="table table-striped">
 <thead>
 <tr>
  <th width="30%">国家代号</th>
  <th width="30%">国家名称</th>
  <th width="40%">父级代号</th>
 </tr>
 </thead>
 <tbody id="tb">
 </tbody>
</table>
<br />
<p><ul class="pagination" id="fenye">
</ul></p>

The following is the js part, using ajax to write

<script type="text/javascript">
var page = 1; //当前页
//加载数据
Load();
//加载分页信息
LoadFenYe();
//给查询加点击事件
$("#chaxun").click(function(){
  //将当前页重置
  page = 1;
  //加载数据
  Load();
  //加载分页信息
  LoadFenYe();
 })
//加载分页信息的方法
function LoadFenYe()
{
 var s = "";
 var name = $("#name").val();
 var minys = 1;
 var maxys = 1;
 $.ajax({
  async:false,
  data:{name:name},
  type:"POST",
  url:"zys.php",
  dataType:"TEXT",
  success: function(data){
    maxys = data;
   }
 });
 //加载上一页
 s += "<li class=&#39;syy&#39;><a>«</a></li>";
 //加载分页列表
 for(var i=page-4;i<page+5;i++)
 {
  if(i>=minys && i<=maxys)
  {
   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;xyy&#39;><a>»</a></li>";
 //显示分页列表
 $("#fenye").html(s);
 //给列表加点击事件
 $(".list").click(function(){
   //改变当前页
   page = $(this).text();
   //加载数据
   Load();
   //加载分页信息
   LoadFenYe();
  })
 //上一页加点击事件
 $(".syy").click(function(){
   //改变当前页
   if(page>1)
   {
    page = parseInt(page)-1;
    //加载数据
    Load();
    //加载分页信息
    LoadFenYe();
   }
  })
 //下一页加点击事件
 $(".xyy").click(function(){
   //改变当前页
   if(page<maxys)
   {
    page = parseInt(page)+1;
    //加载数据
    Load();
    //加载分页信息
    LoadFenYe();
   }
  })
}

//加载数据的方法
function Load()
{
 var name = $("#name").val();
 $.ajax({
  url:"jiazai.php",
  data:{page:page,name:name},
  type:"POST",
  dataType:"TEXT",
  success: function(data){
    var str = "";
    var hang = data.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>"+lie[2]+"</td></tr>";
    }
    $("#tb").html(str);
   }
 });
}

The code of the jiazai.php page is as follows:

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

zys.php code is as follows:

<?php
include("DADB.class.php");
$db=new DADB();
$key=$_POST["name"];
$sql="select count(*) from chinastates where areaname like &#39;%{$key}%&#39;"; //显示总共有多少条内容
$zts=$db->StrQuery($sql);
echo ceil($zts/20);

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

Recommended reading:

jQuery+Ajax determines whether the entered verification code passes

Ajax cross-domain request cannot cookie

The above is the detailed content of Detailed explanation of the steps to implement paging and paging query functions in ajax. For more information, please follow other related articles on the PHP Chinese website!