<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. centos7上配置mysql8的主从复制

    注意:1.主库:10.1.131.75,从库:10.1.131.762.server-id必须是纯数字,并且主从两个server-id在局域网内要唯一. [主节点]vi /etc/my.cnf[mys ...

  2. 集合类源码（三）Collection之List（CopyOnWriteArrayList, Stack）

    CopyOnWriteArrayList 功能 全名 public class CopyOnWriteArrayList<E> implements List<E>, Rand ...

  3. JS修改URL参数，并修改前页面的地址

    function changeURLArg(url,arg,arg_val){ var pattern=arg+'=([^&]*)'; var replaceText=arg+'='+arg_ ...

  4. json工具类（一）——alibaba包

    package com.ruoyi.common.utils.json; import java.util.HashMap; import java.util.List; import java.ut ...

  5. MySQL：实用 SQL 语句集合

    写在前面的话 本文主要用于记录工作中不经常使用但是偶尔用到又非常有用的 SQL 语句,持续不断不定期更新. 数据库大小统计 1. 查看 MySQL 某个库的所有表大小,记录数,占用空间等. ,), ' ...

  6. Zookeeper到底是什么

    1. 什么是Zookeeper 用一句话对其进行定义就是:它是一套高吞吐的分布式协调系统.从中我们可以知道Zookeeper至少具有以下特点: 1.Zookeeper的主要作用是为分布式系统提供协调服 ...

  7. 排序算法Java代码实现（五）—— 快速排序

    本篇内容: 快速排序 快速排序 算法思想: 通过一趟排序将要排序的数据分割成独立的两部分, 其中一部分的所有数据都比另外一部分的所有数据都要小, 然后再按此方法对这两部分数据分别进行快速排序, 整个排 ...

  8. oracle 自增序列实现 可作为主键

    好记性不如烂笔头 记录如何建立oracle 自增序列 表结构 create table TAB_USERINPUT ( RID VARCHAR2(20) not null, VARID VARCHAR ...

  9. .Net IOC框架入门之——CastleWindsor

    一.简介 Castle是.net平台上的一个开源项目,为企业级开发和WEB应用程序开发提供完整的服务,用于提供IOC的解决方案.IOC被称为控制反转或者依赖注入(Dependency Injectio ...

  10. PIE SDK内存矢量数据的创建

    1.功能简介 GIS将地理空间数据表示为矢量数据和栅格数据.矢量数据模型使用点.线和多边形来表示具有清晰空间位置和边界的空间要素,如控制点.河流和宗地等,每个要素被赋予一个ID,以便与其属性相关联.栅 ...