<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. Zookeeper 运维实践手册

    Zookeeper是一个高可用的分布式数据管理与协调框架,该框架能很好地保证分布式环境中数据一致性.一般用来实现服务发现(类似DNS),配置管理,分布式锁,leader选举等. 一.生产环境中Zook ...

  2. 阿里云服务器ECS安全组设置 允许ping

    另外也需要服务器的设置允许ping

  3. git 用 diff 来检查改动

    用 diff 来检查改动 项目的开发是由无数个微小的改动组成的.了解项目开发过程的关键就是要搞清楚每一个改动.当然你可以使用 “git status” 命令或更简单的 “git log” 命令来打印出 ...

  4. logger.error打印完整的错误堆栈信息

    使用Spring Boot项目中的日志打印功能的时候,发现调用Logger.errror()方法的时候不能完全地打印出网站的错误堆栈信息,只能打印出这个错误是一个什么错误. 为什么呢,原因在于这个方法 ...

  5. 使用Jenkins来实现内部的持续集成流程（下）

    目录 配置项目构建 添加任务 添加源代码地址和登录凭据 添加构建触发器  TFS添加WebHook  添加构建步骤 后端UI  API端  配置项目构建 1.添加任务 2.添加源代码地址和登录凭据 添 ...

  6. 【学习笔记】C#中的泛型和泛型集合

    一.什么是泛型? 泛型是C#语言和公共语言运行库(CLR)中的一个新功能,它将类型参数的概念引入.NET Framework.类型参数使得设计某些类和方法成为可能,例如,通过使用泛型类型参数T,可以大 ...

  7. MAC电脑卸载Jenkins

    终端输入下面命令 '/Library/Application Support/Jenkins/Uninstall.command' zudeMoPro:~ zhu$ '/Library/Applica ...

  8. Nuxt中使用Vant，完成通知栏Notify的提示

    第一次移动端开发,UI方面选择了使用vant框架,但是vant官网写的使用,在nuxt项目中照搬官方的实例,各种报错,所以还得靠自己(使用方法在最后) 官方实例: 方法一:直接复制粘贴的时候,报错No ...

  9. Eureka应用注册与集群数据同步源码解析

    在之前的EurekaClient自动装配及启动流程解析一文中我们提到过,在构造DiscoveryClient类时,会把自身注册到服务端,本文就来分析一下这个注册流程 客户端发起注册 boolean r ...

  10. 《2017年-2018年中国MES软件及服务市场研究报告》正式发布！

    <2017年-2018年中国MES软件及服务市场研究报告>由e-works Research研究编写,报告深度分析了2017年及2018年中国MES市场发展状况,从市场规模.市场特点.需求 ...