Ajax implementation of data paging query

Time:2020-1-18

AJAX is used to query the database and paginate the query data for your reference. The details are as follows

Master page code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title > Untitled Document < / Title >
<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
.dangqian{ background-color:#69F}
</style>
</head>

<body>

<div>
<input type="text" />
< input type = "button" value = "query" / >
</div>

<table width="100%" border="1" cellpadding="0" cellspacing="0">
 <tr>
  <td>Code</td>
  <td>Name</td>
  <td>Parent code</td>
 </tr>
 
 <tbody>
 
 </tbody> 
</table>
<div>
</div>
</body>

JS code

<script type="text/javascript">
Var page = 1; // current page defines a variable current page


Load(); // load data
Loadxinxi(); // load paging information


// query
$("#chaxun").click(function(){
  page = 1;
  Load(); // load data
  Loadxinxi(); // load paging information
 })
function Load()
{
 var key = $("#key").val(); // query条件
 
 $.ajax({
   url:"chuli.php",
   data:{page:page,key:key},
   type:"POST",
   dataType:"JSON",
   success: function(data){
     var str = "";
     for(var k in data)
     {
      str +="<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";
     }
     $("ාnr"). HTML (STR); // return the data to the table
    }
  });
}


functionLoadXinXi()
{
 var str = "";
 var minys = 1;
 var maxys = 1;
 var key = $("#key").val();
 
 //Total pages
 $.ajax({
   async:false,
   url:"zys.php",
   data:{key:key},
   type:"POST",
   dataType:"TEXT",
   success: function(d){
     maxys = d;
    }
  });
 
 STR + = "< span > total:" + maxys + "page < / span >";
 STR + = "< span id ='prev '> previous page < / span >";
 
 for(var i=page-2;i<page+3;i++)
 {
  if(i>=minys && i<=maxys)
  {
   if(i==page)
   {
    str += "<span class='dangqian' bs='"+i+"'>"+i+"</span>  ";
   }
   else
   {
    str += "<span class='list' bs='"+i+"'>"+i+"</span>  ";
   }
  
  }
 }
  
 STR + = "< span id ='next '> next page < / span >"; 
 
 $("#xinxi").html(str);
 
 //Add click event to previous page
 $("#prev").click(function(){
   page = page-1;
   if(page<1)
   {
    page=1;
   }
   Load(); // load data
   Loadxinxi(); // load paging information
  })
 //Add click event to next page
 $("#next").click(function(){
   page = page+1;
   if(page>maxys)
   {
    page=maxys;
   }
   Load(); // load data
   Loadxinxi(); // load paging information
  })
 //Add events to the middle list
 $(".list").click(function(){
   page = parseInt($(this).attr("bs"));
   Load(); // load data
   Loadxinxi(); // load paging information
  })
}

</script>

Process page 1


<?php
include("DBDA.class.php");
$db = new DBDA();

$key = $_POST["key"];
$num = 20;

$sql = "select count(*) from chinastates where areaname like '%{$key}%'";

$zts = $db->StrQuery($sql);

echo ceil($zts/$num);


Process page 2


<?php
include("DBDA.class.php");
$db = new DBDA();

$page = $_POST["page"];
$key = $_POST["key"];
$num = 20;
$tiao = ($page-1)*$num;

$sql = "select * from chinastates where areaname like '%{$key}%' limit {$tiao},{$num}";

echo $db->JSONQuery($sql);

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.