Ajax implements paging query without refreshing the page

This time I will bring you Ajax to implement paging query without refreshing the page. What are the precautions for Ajax to implement paging query without refreshing the page? The following is a practical case. Let’s take a look. take a look. Today we are going to use ajax to do a paging:

Implement Ajax paging:

Add query conditions if possible

Find a table for paging
Do not use the page class for paging
No need to refresh the page
Ajax loading data

4. nbsp;html>
   
   
     <meta>
     <title>Document</title>
     <script></script>
   <style>
   .dangqian{ background-color:#69F}
   </style>
   
   
   <p>
     <input>
     <input>
   </p>
   

                             

   代号

   名称

   父级代号

   <script> var page = 1;//定个变量，当前要显示的页 Load();//加载数据 Loadfenyexinxi();//加载分页信息 //查询 $("#chaxun").click(function(){ page = 1; Load();//加载数据 Loadfenyexinxi();//加载分页信息 }) function Load() { var key = $("#key").val();//查询条件。用户输入的内容 $.ajax({ url:"chuli.php", data: { page: page, key: key },//传2个参数一当前页2关键字也就是查询条件 type:"POST", dataType:"JSON", success: function(data){//匿名函数 var str = "";//这个将来要放表格显示的 for(var k in data)//通过K可以获得每一条数据 {//加载数据完成 str +="<tr><td>"+data[k].AreaCode+"<td>"+data[k].AreaName+"<td>"+data[k].ParentAreaCode+"";//要显示的内容，代号、名称父级代号 } $("#neirong").html(str); } }); } function Loadfenyexinxi()//分页信息 { var str = ""; var minys = 1;//最小页数 var maxys = 1;//最大页数 var key = $("#key").val();//取关键字用于传到zys页面用 $.ajax({ async:false, type:"POST", url:"fenye.php", data:{key:key}, dataType:"TEXT", success:function(d){ maxys = d; } }); str += "<span style=&#39;text-decoration:underline; cursor:pointer&#39;>总共："+maxys+"页 "; str += "<span id=&#39;prev&#39; style=&#39;text-decoration:underline; cursor:pointer&#39;>上一页"; for(var i=page-2;i<page+3;i++) { if(i>=minys && i<=maxys) { if(i==page) { str += "<span style=&#39;text-decoration:underline; cursor:pointer&#39; class=&#39;dangqian&#39; bs=&#39;"+i+"&#39;>"+i+" "; } else { str += "<span style=&#39;text-decoration:underline; cursor:pointer&#39; class=&#39;list&#39; bs=&#39;"+i+"&#39;>"+i+" "; } } } str += "<span style=&#39;text-decoration:underline; cursor:pointer&#39; id=&#39;next&#39;>下一页"; $("#fenyexinxi").html(str); $("#prev").click(function(){ page = page-1; if(page<1) { page=1; } Load(); Loadfenyexinxi(); }) $("#next").click(function(){ page = page+1; if(page>maxys) { page=maxys; } Load(); Loadfenyexinxi(); }) $(".list").click(function(){ page = parseInt($(this).attr("bs")); Load(); Loadfenyexinxi(); }) } </script>
The above is this page: test.php

<?php include("DBDA.class.php");
$db = new DBDA();
//把上个页面的2个值传过来
$page = $_POST["page"];//当前页
$key = $_POST["key"];//条件，关键字
$num = 20;//定义，一页里多少条数据，
$tiaoshu = ($page-1)*$num;//$tiaoshu跳过多少条($page-1)*$num现在$num是20条
//写$SQL语句
$sql = "select * from chinastates where areaname like &#39;%{$key}%&#39; limit {$tiaoshu},{$num}";//根据关键字查like &#39;%{$tiaojian}%&#39;。
echo $db->JSONQuery($sql);

The above is the processing page: chuli.php:

<?php include("DBDA.class.php");
$db = new DBDA();
$key = $_POST["key"];
$num = 20;
$sql = "select count(*) from chinastates where areaname like &#39;%{$key}%&#39;";
$zts = $db->StrQuery($sql);
echo ceil($zts/$num);

The above is paging Page: fenye.php

The following is our display effect:

As you click the next page, 5 pages will be displayed below, and they are the current page There are two pages on the left and right, and the number of information displayed on each page can be adjusted by yourself.

Enter keywords in the text box above to display relevant information. This is the paging we do using ajax.

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!

Recommended reading:

Detailed explanation of ajax paging query image and text

How to use fileinput to implement ajax asynchronous upload

The above is the detailed content of Ajax implements paging query without refreshing the page. For more information, please follow other related articles on the PHP Chinese website!