<html>
<script>
　　var page=1;
// 页面第一次加载，显示第一页
　　window.onload=function(){
　　　　ajax_go(1)
　　}

//分页的代码
　　function ajax_go(type){
　　　　if (type==1) {　　　　　　　　//首页
　　　　　　page=1;
　　　　}else if (type=='prev') {　　　　//上一页
　　　　　　page=page-1>1?page-1:1;
　　　　}else if(type=='next'){　　　　//下一页
　　　　　　page=page+1>max?max:page+1;
　　　　}else{　　　　　　　　　　//尾页
　　　　　　page=max;
　　　　}
　　　　var str = ""

//ajax 核心代码
　　　　var xhr = new XMLHttpRequest;
　　　　xhr.open('get','getdata.php?p='+page)
　　　　xhr.send();
　　　　xhr.onreadystatechange=function(){　　
　　　　　　if (xhr.readyState==4&&xhr.status==200) {
　　　　　　　　var obj = JSON.parse(xhr.responseText)
　　　　　　// 数据
　　　　　　　　var data = obj['data'];
　　　　　　// 最大页码
　　　　　　　　max = obj['pages'];

//拼接要显示的数据
　　　　　　　　for (var i = 0; i < data.length; i++) {
　　　　　　　　　　str +="<tr>"
　　　　　　　　　　str +="<td>"+data[i]['id']+"</td>"
　　　　　　　　　　str += "<td>"+data[i]['goods_name']+"</td>"
　　　　　　　　　　str +="<td>"+data[i]['price']+"</td>"
　　　　　　　　　　str +="<td>"+data[i]['state']+"</td>"
　　　　　　　　　　str +="</tr>"
　　　　　　　　}
　　　　　　　　document.getElementById('content').innerHTML=str
　　　　　　　　document.getElementById('all').innerHTML=max
　　　　　　}
　　　　}
　　}

</script>
<body>
　　<table border="1">
　　　　<tr>
　　　　　　<th>id</th>
　　　　　　<th>标题</th>
　　　　　　<th>单价</th>
　　　　　　<th>状态</th>
　　　　</tr>
　　　　<tbody id="content">

　　　　</tbody>
　　</table>
　　<div>
　　　　共<span id='all'></span>页
　　　　<span><button onclick="ajax_go(1)">首页</button></span>
　　　　<span><button onclick="ajax_go('prev')">上一页</button></span>
　　　　<span><button onclick="ajax_go('next')">下一页</button></span>
　　　　<span><button onclick="ajax_go('end')">尾页</button></span>
　　</div>
</body>
</html>

下面是getdata.php：

<?php
$link = mysqli_connect("127.0.0.1", "root", "root", "news") or die("数据库连接失败!");
// 一、接收页码值
$p = $_GET["p"] ?? 1;
// 二、获取总条数
$sql = "select * from goods";
$result = mysqli_query($link, $sql);
$total = mysqli_num_rows($result);
// 三、计算偏移量
$size = 5; // 设置每页显示条数
$start = ($p - 1) * $size;
//四、 拼接sql语句
$page_sql = "select * from goods limit $start,$size";
$res = mysqli_query($link, $page_sql);
// 查询出分页的数据
while ($rows = mysqli_fetch_assoc($res)) {
　　$data[] = $rows;
}
// 总页数
$pages = ceil($total / $size);
// 把数组转为json字符串
echo json_encode(['pages' => $pages, 'data' => $data]);

?>

效果图：

原生ajax分页，无刷新分页，最简化。超简单，代码最少的更多相关文章

  1. Ajax 实现无刷新分页

    Ajax 实现无刷新分页

  2. 在Thinkphp中使用AJAX实现无刷新分页

    在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...

  3. javascript项目实战---ajax实现无刷新分页

    分页: limit 偏移量,长度; limit 0,7; 第一页 limit 7,7; 第二页 limit 14,7; 第三页 每页信息条数:7 信息总条数:select count(*) from ...

  4. ajax实现无刷新分页效果

    基于jquery.pagination.js实现的无刷新加载分页数据效果. 简介与说明 * 该插件为Ajax分页插件,一次性加载数据,故分页切换时无刷新与延迟.如果数据量较大,加载会比较慢. * 分页 ...

  5. Ajax做无刷新分页

    1.主页面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  6. knockout Ajax异步无刷新分页 Demo +mvc+bootstrap

    最近工作中web客户端需要用到knockout,在此记录下一些Demo,以后用到的时候查找起来方便.也希望给新入门的knockout使用者一点经验.knockout官方文档.这儿是一个使用knocko ...

  7. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  8. 学习笔记之AJAX无刷新分页

    利用AJAX实现无刷新分页技术原理: 其主要是利用AJAX的异步处理机制,实现数据的异步传递,它隐藏了客户端向服务端请求数据的状态,在客户端表现为无刷新的显示状态. 实现分页的步骤: 1.客服端点击页 ...

  9. Ajax 实现无刷新页面

    注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...

  10. ajax 无刷新分页

    //ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...

随机推荐

  1. 动手学深度学习4-线性回归的pytorch简洁实现

    导入同样导入之前的包或者模块 生成数据集 通过pytorch读取数据 定义模型 初始化模型 定义损失函数 定义优化算法 训练模型 小结 本节利用pytorch中的模块,生成一个更加简洁的代码来实现同样 ...

  2. day11——函数名的使用、f格式化、迭代器、递归

    day11 函数名的第一类对象及使用 1.可以当作值被赋值给变量 def func(): print(1) print(func) a = func a() 2.当作元素存放在容器中 def func ...

  3. Lock+Condition实现机制

    前言:大部分多线程同步场景,在功能和性能层面,synchronized可以满足,少部分场景Lock可以满足,dubbo的源码也符合这个比例,需要使用到Condition的场景极少,整个dubbo源码中 ...

  4. web api对接小程序基本签名认证

    using BMOA.Application.System; using BMOA.Common; using BMOA.Web.Models; using Newtonsoft.Json; usin ...

  5. python 排序 堆排序

    算法思想 : 堆排序利用堆数据结构设计的一种排序算法,堆是一种近似完全二叉树的结构,同时满足堆积的性质,即对于任意的i均有ki>=k(2i+1),ki>=k(2i+2) 步骤: 将数组转化 ...

  6. Go函数篇

    1 定义格式 函数构成代码执行的逻辑结构.在Go语言中,函数的基本组成为:关键字func.函数名.参数列表.返回值.函数体和返回语句. Go 语言函数定义格式如下: func FuncName(/*参 ...

  7. [干货]kubenertes ingress负载grpc

    目录 概述 搭建 生成公私钥 创建secret 创建ingress 访问 概述 一般情况下,我们的系统对外暴露HTTP/HTTPS的接口,内部使用rpc(GRPC)通讯,这时GRPC在服务之间通过se ...

  8. 由于找不到mingwm10.dll 由于找不到QtCore4.dll

    出现如下错误: 由于找不到mingwm10.dll 由于找不到QtCore4.dll 解决办法 将qt库加入环境变量

  9. linux echo命令颜色显示

    echo命令颜色显示: echo:      -n:  不换行.      -e:让转移符生效. \t(tab) \n (换行) 实例: $ echo -e "\033[34mabcd\03 ...

  10. Django 中的缓存问题

    Django 中的缓存问题 简单介绍 ​ 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. ​ 当一个网站的用户访问量很大的 ...