网络编程 
首页 > 网络编程 > 浏览文章

Ajax实现无刷新分页实例代码

(编辑:jimmy 日期: 2024/10/10 浏览:3 次 )

今天我们要用ajax做一个分页:

实现Ajax分页:

如果可以的话加上查询条件

  1. 找一张表做分页
  2. 分页不使用page类
  3. 页面不用刷新
  4. Ajax加载数据
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="/UploadFiles/2021-04-02/jquery-1.11.2.min.js">

上面是这页面:test.php

<"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 '%{$key}%' limit {$tiaoshu},{$num}";//根据关键字查like '%{$tiaojian}%'。
echo $db->JSONQuery($sql);

上面是处理页面:chuli.php:

<"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);

上面是分页页面:fenye.php

下面就是我们的显示效果:

Ajax实现无刷新分页实例代码

随着点击下一页,下面会显示5页,并且是当前页左右各两个页面,每页的显示信息条数可以自己调整。

在上方的文本框中输入关键词会显示出相关的信息。这就是我们用ajax做的分页。

以上所述是小编给大家介绍的Ajax实现无刷新分页实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

上一篇:Ajax写分页查询(实现不刷新页面)
下一篇:ajax编写简单的登录页面
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。