Ajax implements paging 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

<meta>
<title>无标题文档</title>
<link>
<script></script>
<script></script>
<style>
.list:hover{ cursor:pointer}
#prev:hover{ cursor:pointer}
#next:hover{ cursor:pointer}
</style>


<p>
</p><h1 id="AJAX分页">AJAX分页</h1>

<p>名称：<input> <button>查询</button></p>
<br>

                    

代号

名称

<script> //代表当前页 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 + "<tr><td>"+data[k].code+"<td>"+data[k].nno+""; } $("#shuju").html(str); } }); } //加载分页信息 function LoadFenYe() { //存储所有分页信息的代码 var s = ""; var name = $("#name").val(); //加载上一页 s = "<li><a id=&#39;prev&#39;>«"; //加载列表 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<page+3;i++) { if(i>0 && i<=zys) { if(i==page) { s = s+"<li class=&#39;active&#39;><a ys=&#39;"+i+"&#39; class=&#39;dangqian&#39;>"+i+""; } else { s = s+"<li><a ys=&#39;"+i+"&#39; class=&#39;list&#39;>"+i+""; } } } //加载下一页 s = s+"<li><a id=&#39;next&#39;>»"; $("#xinxi").html(s); //给上一页加事件 $("#prev").click(function(){ page = parseInt(page); if(page>1) {page--;} //重新加载数据 Load(); //重新加载分页信息 LoadFenYe(); }) //给下一页加事件 $("#next").click(function(){ page = parseInt(page); if(page<zys) {page++;} //重新加载数据 Load(); //重新加载分页信息 LoadFenYe(); }) //给列表加事件 $(".list").click(function(){ page = parseInt($(this).attr("ys")); //重新加载数据 Load(); //重新加载分页信息 LoadFenYe(); }) } $("#chaxun").click(function(){ //重新加载数据 Load(); //重新加载分页信息 LoadFenYe(); }) </script> 2.chuli.php

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

3.zongtiaoshu.php

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

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:

How to use ajax to submit comments and automatically refresh

How to let the browser remember the ajax request And control the browser forward and backward

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