<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. [最新].NET Core ORM 开源项目一览，持续更新

    截至2019-05-08共收集27个 .NET Core ORM 开源项目,38个 .NET ORM 开源项目. .NET Core ORM 开源项目收集地址:https://github.com/o ...

  2. hystrixDashboard(服务监控)

    1.新建项目 microservicecloud-consumer-hystrix-dashboard 2.yml文件 server: port: 9001 3.在pom.xml文件增加如下内容 &l ...

  3. POJ 1146 ID Codes 用字典序思想生成下一个排列组合

    ID Codes Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7644   Accepted: 4509 Descript ...

  4. Base64和本地以及在线图片互转

    package com.ruoyi.common.utils; import java.io.ByteArrayOutputStream; import java.io.FileInputStream ...

  5. Mac下Homebrew将程序文件存在什么位置

    一般情况是这么操作的: 1.通过brew install安装应用最先是放在/usr/local/Cellar/目录下. 2.有些应用会自动创建软链接放在/usr/bin或者/usr/sbin,同时也会 ...

  6. APS.NET MVC + EF (14)---项目框架搭建

    一:框架搭建     1:先创建Model. 2:创建数据访问接口层.IUserInfoDal 在该接口中定义了常见的方法CURD以及分页方法. public interface IUserInfoD ...

  7. 搞Jedis案例出现问题，有大佬帮我看看怎么解决吗？先感谢大佬点进来看了---Day31

    今天学了Jedis的相关内容,然后做了一个案例,但是出现了错误,然后我百度了一晚上没有解决,想到看看发个博客能不能有大佬帮我看一下问题出现在哪里,百度了一晚上有点懵逼.求大佬帮我解决,在这小弟我先万分 ...

  8. android 调试崩溃Unable to instantiate application的解决方法

    E/AndroidRuntime: FATAL EXCEPTION: main                   Process: com.***.plants, PID: 23100        ...

  9. Elasticsearch的快照备份

    该文档适用于备份使用NAS的仓库类型.所有Elasticsearch集群中的服务通过挂载NAS目录来存放备份快照数据. 1.创建备份仓库 创建一个仓库名称:backup curl -H "C ...

  10. Python从零开始——运算符