原生ajax分页,无刷新分页,最简化。超简单,代码最少
<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分页,无刷新分页,最简化。超简单,代码最少的更多相关文章
- Ajax 实现无刷新分页
Ajax 实现无刷新分页
- 在Thinkphp中使用AJAX实现无刷新分页
在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...
- javascript项目实战---ajax实现无刷新分页
分页: limit 偏移量,长度; limit 0,7; 第一页 limit 7,7; 第二页 limit 14,7; 第三页 每页信息条数:7 信息总条数:select count(*) from ...
- ajax实现无刷新分页效果
基于jquery.pagination.js实现的无刷新加载分页数据效果. 简介与说明 * 该插件为Ajax分页插件,一次性加载数据,故分页切换时无刷新与延迟.如果数据量较大,加载会比较慢. * 分页 ...
- Ajax做无刷新分页
1.主页面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- knockout Ajax异步无刷新分页 Demo +mvc+bootstrap
最近工作中web客户端需要用到knockout,在此记录下一些Demo,以后用到的时候查找起来方便.也希望给新入门的knockout使用者一点经验.knockout官方文档.这儿是一个使用knocko ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
- 学习笔记之AJAX无刷新分页
利用AJAX实现无刷新分页技术原理: 其主要是利用AJAX的异步处理机制,实现数据的异步传递,它隐藏了客户端向服务端请求数据的状态,在客户端表现为无刷新的显示状态. 实现分页的步骤: 1.客服端点击页 ...
- Ajax 实现无刷新页面
注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...
- ajax 无刷新分页
//ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...
随机推荐
- Zookeeper原理图
- [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated column 'information_schema.PROFILING.SEQ'
在Navicat Premium中执行Mysql的一条删除语句,虽然执行成功了,却提示已下错误: 受影响的行: 时间: .005s of ORDER BY clause is not in GROUP ...
- SpringBoot+Mybatis+Druid批量更新 multi-statement not allow异常
本文链接:https://blog.csdn.net/weixin_43947588/article/details/90109325 注:该文是本博主记录学习之用,没有太多详细的讲解,敬请谅解! ...
- java获取调用当前方法的方法名和行数
java获取调用当前方法的方法名和行数String className = Thread.currentThread().getStackTrace()[2].getClassName();//调用的 ...
- jdk8 接口的变化
在jdk8之前,interface之中可以定义变量和方法,变量必须是public.static.final的,方法必须是public.abstract的.由于这些修饰符都是默认的以下写法等价 publ ...
- JAVA操作InfluxDB的一个Demo
一.基础连接类 package com.test.repository.utils; import com.dcits.domain.entry.bo.common.InfluxDbRow; impo ...
- lift提升图
Lift图衡量的是,与不利用模型相比,模型的预测能力“变好”了多少,lift(提升指数)越大,模型的运行效果越好. TP:划一个阈值后的正样本. P:总体的正样本. 在模型评估中,我们常用到增益/提升 ...
- python 排序 归并排序
算法思想 迭代法: 归并算法一共有两种思想,笼统的说,这两种思想的区别就在于一种不分割未排序的序列(直接将序列看为n个个数为1的子序列),这种称为---迭代法 直接从队头开始,两两合并为一个个数为2的 ...
- 数据库系列(五)之 mysql的伸缩性
这篇文章,主要讲述mysql的伸缩性.在国内mysql一直都是使用得最多的数据库,在国外也排名前三.mysql是一款开源的.性能较高的数据库. 伸缩性是指在软件设计中,软件(数据库.应用程序)通过特定 ...
- 移动前端viewPort的那些事
1.viewport简单说 一般来说,移动上的viewport都是大于浏览器窗口的,不同的设备有自己默认的viewport值(980px或1024px). 2.三个viewport的理解(layout ...