<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. [数据结构 - 第8章] 查找之哈希表（C语言实现）

    首先是需要定义一个哈希表的结构以及一些相关的常数.其中 HashTable 就是哈希表结构.结构当中的 elem 为一个动态数组. #define HASHSIZE 12 // 定义哈希表长为数组的长 ...

  2. 社招C++后台面试-拿到offer

    社招C++后台面试-拿到offer 之前在一家小公司上班,主要是做C语言的嵌入式软件开发,涉及过一点点C++.工作大概三年,然后去试试大公司,这个面试题是我拿到offer后4个月才拖拖拉拉的开始写,题 ...

  3. mybatis使用associaton进行分步查询

    Employee类 public class Employee { private Integer id; private String lastName; private String email; ...

  4. python多条插入问题

    多条插入用excutemany(listtuple) #coding=utf-8 import MySQLdb import traceback sqlstr= "insert into t ...

  5. Deep Learning专栏--强化学习之MDP、Bellman方程（1）

    本文主要介绍强化学习的一些基本概念:包括MDP.Bellman方程等, 并且讲述了如何从 MDP 过渡到 Reinforcement Learning. 1. 强化学习基本概念 这里还是放上David ...

  6. 【git】【Idea】git刷新获取远程分支列表，可以在idea上看到最新的远程分支列表

    [前提:本地项目是从GitLab或gitHub这些远程仓库上拉下来的 ,并且本地安装了git] ==================================================== ...

  7. .net core vue+wangEditor (双向绑定) 上传图片和视频功能

    最终效果,是这样的,现在开始记录怎么做: 开始 npm 安装 wangEditor 安装好后, 因为要用vue 双向绑定 ,所以 我就把wangwangEditor 做成了一个封装组件,先看一下目录 ...

  8. java获取调用当前方法的方法名和行数

    java获取调用当前方法的方法名和行数String className = Thread.currentThread().getStackTrace()[2].getClassName();//调用的 ...

  9. C# WebBrowser控件 下载文件不弹下载提示框的办法

    参考链接 https://stackoverflow.com/questions/6773866/download-file-and-automatically-save-it-to-folder p ...

  10. <compilation debug="true" targetFramework="4.5.2"> 报错解决方案

    有的时候新建项目,默认会选择比较高的 .net framework 版本如 4.5.2 有的时候发布项目就会遇到这个问题 解决的话 改成4.0就行了! 看你发布在哪里,如果在本地或者服务器,只要去下载 ...