Home > Web Front-end > JS Tutorial > body text

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

php中世界最好的语言
Release: 2018-04-02 10:38:04
Original
2084 people have browsed it

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>
Copy after login

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>
Copy after login

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();
   }
  })
}
Copy after login
//加载数据的方法
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);
   }
 });
}
Copy after login

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);
Copy after login

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);
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template