您现在的位置是：网站首页> 编程资料编程资料

Ajax写分页查询（实现不刷新页面）_AJAX相关_

2023-05-25 153人已围观

简介 Ajax写分页查询（实现不刷新页面）_AJAX相关_

要求：

获取数据库中大量的信息显示在页面上，必然要使用到分页查询；

若不使用Ajax，而是用其他的方法，肯定是要刷新页面的，用户体检很不好，

所以最好使用Ajax的方法写分页查询；

1.先来找一张数据很多的表吧！

一张简单的表

代码，引入jquery包：

写一张表格，显示我们的代号跟名称：

代号 名称 操作

这些都很简单，没毛病！

2.设一个当前页，定义一个变量为1（第一页）：

 var page = 1; //当前页，默认等于1

3.下面来写第一个方法：需要用ajax，这个方法主要起查询，且分页的作用：

 function load() { $.ajax({ url: "jiazai.php", // 显示所有的数据不用写data data:{page:page}, //当前页记得传过去 type:"POST", dataType: "TEXT", success: function (data) { } }); }

4.去写显示数据的处理页面;这里要考虑的是跳过多少条数据还有想要显示多少条数据，用到limit：

Query($sql);

做完了第一步，来看看图：

显示数据实现！

好的，每页先是三条数据已经实现了，（页面变成这样我用了美化网页的Bookstrap，前面有讲到）

5.显示分页信息，写一个方法，先用ajax先获取总页数：

 function loadfenye() { var s = ""; //用于接收 var xiao = 1; // 最大页 var da = 1; // 最小页 $.ajax({ async:false, // 做成同步 url:"zys.php", dataType:"TEXT", success:function(data){ da = data; //最大页数 } }); }

接下来做查询总页数的php页面：

strquery($sql); //总条数 echo ceil($zts/3); //ceil向上取整

好啦，总页数获取到了，回来把分页写完吧：

 //加载分页信息方法 function loadfenye() { var s = ""; //用于接收 var xiao = 1; // 最大页 var da = 1; // 最小页 $.ajax({ async:false, // 做成同步 url:"zys.php", dataType:"TEXT", success:function(data){ da = data; //最大页数，查到的最大页数交个默认的最大页数 } }); //加载上一页 s += "«
"; // 加载分页列表 for(i=page-4;i=xiao && i<=da) { s += " "+i+"
" } } // 加载下一页 s += "»
"; $("#fenye").html(s); }

这样写完了以后，来看图：

分页的信息也显示出来了

6.来把默认选中页数的背景色来改变一下吧

看一下Bookstrap；改背景色的方法吧：

很显然是多了一个active的样式，我们用判断给加上吧

 if(i>=xiao && i<=da) { if (i == page) { s += " " + i + "
" } else { s += " " + i + "
"; }

好了，看一下：

可以，没毛病

7.做页数的点击事件，实现点击页数跳转到该页数并显示数据，还要更新列表；

先给数字列表加上一个class

s += "

" + i + "

"

然后写方法：

 //给列表加上点击事件 $(".list").click(function(){ //改变当前页数 //把点击的页数，扔给page（当前页） page = $(this).text(); // page获取了当前页，重新加载以下方法 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 }) }

当我点击第五页：

没毛病；

8.再来就是上一页和下一页的点击事件了，首先是上一页的点击事件：

首先在上一页的列表里加上class，便于写事件：

s += "

«

";

来，上一页点击事件：

 $(".sy").click(function(){ //改变当前页 if(page>1) { //如果不是第一页 page = parseInt(page) - 1; } // page获取了当前页，重新加载以下方法 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 })

下一页的点击事件：

同上：列表里加上class，便于写事件：

s += "

»

";

下一页点击事件：

 //下一页点击事件 $(".xy").click(function(){ // alert(da); if(page

好，完美实现ajax分页查询；

8.再加一个按条件查询：

加上文本框：

来写点击事件：

 //给查询加点击事件 $("#chaxun").click(function(){ //重新加载 //调用load方法 load(); //把加载数据封装成一个方法 loadfenye(); //加载分页信息方法 })

接下来我们需要改一下这两个方法：

ajax只需要把文本框的name传过去就好啦：

 data:{page:page,name:name}, type:"POST",

 data:{name:name}, type:"POST",

在处理页面，设置一个恒等的条件：

 $tj = " 1=1 "; if(!empty($_POST["name"])) { $name = $_POST["name"]; $tj = " name like '%{$name}%' "; }

最后在sql语句后面调用就好啦

图：

页面不刷新的分页查询就欧克了；

源码：

显示页面：

无标题文档显示数据

代号 名称 操作

详情