php实现分页功能跳转和ajax方式实现

实现效果 

准备工作 

创建数据表和导入测试数据

CREATE TABLE `users` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `username` varchar(30) DEFAULT NULL COMMENT '账号',
  `email` varchar(30) DEFAULT NULL COMMENT '密码',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

INSERT INTO `users` VALUES ('1', 'admin', 'admin@qq.com');

INSERT INTO `users` VALUES ('2', 'xiaoming', '123456@qq.com');

INSERT INTO `users` VALUES ('3', 'xiaoming1', '123456@qq.com');

INSERT INTO `users` VALUES ('4', 'xiaoming2', '123456@qq.com');

INSERT INTO `users` VALUES ('5', 'xiaoming3', '123456@wy.com');

INSERT INTO `users` VALUES ('6', 'xiaoming4', '123456@wy.com');

INSERT INTO `users` VALUES ('7', 'xiaoming5', '123456@wy.com');

INSERT INTO `users` VALUES ('8', 'xiaoming6', '123456@wy.com');

INSERT INTO `users` VALUES ('9', 'xiaoming7', '123456@wy.com');

 

目录

一、php实现分页功能一(跳转方式) 

二、使用ajax实现php分页功能


一、php实现分页功能一(跳转方式) 
<?php
// 连接数据库
$conn = new mysqli('localhost', 'root', 'root', 'aaa');
// 检查连接是否成功
if ($conn->connect_error) {die("连接失败:" . $conn->connect_error);
}
// 每页显示的记录数
$records_per_page = 3;
// 获取当前页数,默认为第一页
if (isset($_GET['page']) && is_numeric($_GET['page'])) {$current_page = $_GET['page'];
} else {$current_page = 1;
}
// 计算总记录数
$query = "SELECT COUNT(*) AS total_records FROM users";
$result = $conn->query($query);
$row = $result->fetch_assoc();
$total_records = $row['total_records'];
// 计算总页数
$total_pages = ceil($total_records / $records_per_page);
// 计算偏移量
$offset = ($current_page - 1) * $records_per_page;
// 查询数据
$query = "SELECT * FROM users LIMIT $offset, $records_per_page";
$result = $conn->query($query);
?><!DOCTYPE html>
<html>
<head><title>分页功能示例</title>
</head>
<body>
<h1>用户列表</h1>
<table><tr><th>ID</th><th>用户名</th><th>邮箱</th></tr><?php while ($row = $result->fetch_assoc()): ?><tr><td><?php echo $row['id']; ?></td><td><?php echo $row['name']; ?></td><td><?php echo $row['email']; ?></td></tr><?php endwhile; ?>
</table>
<div><?php if ($current_page > 1): ?><a href="?page=1">首页</a><a href="?page=<?php echo $current_page - 1; ?>">上一页</a><?php endif; ?>当前页:<?php echo $current_page; ?> / <?php echo $total_pages; ?><?php if ($current_page < $total_pages): ?><a href="?page=<?php echo $current_page + 1; ?>">下一页</a><a href="?page=<?php echo $total_pages; ?>">最后一页</a><?php endif; ?>
</div>
</body>
</html>
二、使用ajax实现php分页功能
<?php// 连接数据库
$conn = new mysqli('localhost', 'root', 'root', 'aaa');
// 检查连接是否成功
if ($conn->connect_error) {die("连接失败:" . $conn->connect_error);
}
// 每页显示的记录数
$records_per_page = 3;
// 获取当前页数,默认为第一页
if (isset($_GET['page']) && is_numeric($_GET['page'])) {$current_page = $_GET['page'];
} else {$current_page = 1;
}
// 计算总记录数
$query = "SELECT COUNT(*) AS total_records FROM users";
$result = $conn->query($query);
$row = $result->fetch_assoc();
$total_records = $row['total_records'];
// 计算总页数
$total_pages = ceil($total_records / $records_per_page);
// 计算偏移量
$offset = ($current_page - 1) * $records_per_page;
// 查询数据
$query = "SELECT * FROM users LIMIT $offset, $records_per_page";
$result = $conn->query($query);
// 构建返回的JSON数据
$data = array();
while ($row = $result->fetch_assoc()) {$data[] = $row;
}
$response = array('data' => $data,'current_page' =>(int) $current_page,'total_pages' => $total_pages
);
echo json_encode($response);
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>分页功能示例(Ajax方式)</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script>$(document).ready(function() {// 初始化加载第一页数据loadPageData(1);// 点击分页链接时,发送Ajax请求加载对应页数的数据$(document).on('click', '.pagination-link', function(e) {e.preventDefault();var page = $(this).data('page');loadPageData(page);});function loadPageData(page) {$.ajax({url: 'test22.php',type: 'GET',data: { page: page },dataType: 'json',success: function(response) {// 清空表格数据和分页链接$('#user-table tbody').empty();$('.pagination').empty();// 更新表格数据$.each(response.data, function(index, user) {var row = '<tr>' +'<td>' + user.id + '</td>' +'<td>' + user.username + '</td>' +'<td>' + user.email + '</td>' +'</tr>';$('#user-table tbody').append(row);});// 更新分页链接var pagination = '';if (response.current_page > 1) {pagination += '&nbsp;&nbsp;<a href="#" class="pagination-link" data-page="1">首页</a>';pagination += '&nbsp;&nbsp;<a href="#" class="pagination-link" data-page="' + (response.current_page - 1) + '">上一页</a>';}pagination += '当前页:' + response.current_page + ' / ' + response.total_pages;if (response.current_page < response.total_pages) {pagination += '>&nbsp;&nbsp;<a href="#" class="pagination-link" data-page="' + (response.current_page + 1) + '">下一页</a>';pagination += '&nbsp;&nbsp;<a href="#" class="pagination-link" data-page="' + response.total_pages + '">最后一页</a>';}$('.pagination').html(pagination);},error: function() {alert('加载数据失败');}});}});</script>
</head>
<body>
<h1>用户列表</h1>
<table id="user-table"><tr><th>ID</th><th>用户名</th><th>邮箱</th></tr><tbody></tbody>
</table>
<div class="pagination"></div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/87785.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小程序 解决自定义弹窗滚动穿透问题,解决弹窗背景内容滚动问题

方法一、catchtouchmove"true"&#xff0c; 可以实现弹框背景不滚动&#xff0c;但是也会导致弹框自身无法滚动&#xff0c;如果你的弹窗本身是不需要滚动的&#xff0c;用这个方法是极佳的。 <view class"pop" catchtouchmove"true"> …

安卓Compose(二)

在上一篇博客中&#xff0c;我们已经了解了安卓Compose的一些基本概念以及使用方法&#xff0c;接下来我们将继续深入学习。 一、Compose的基础组件 文本组件(Text) 文本组件是Compose中最基本的组件之一&#xff0c;用于在界面上显示文本。使用方式如下&#xff1a; // 定…

【OpenSSL】OpenSSL实现Base64

Base 64概述和应用场景 概述 Base64就是将二进制数据转换为字符串的一种算法。 应用场景 邮件编码xml或则json存储二进制内容网页传递数据URL数据库中以文本形式存放二进制数据可打印的比特币钱包地址base58Check(hash校验)网页上可以将图片直接使用Base64表达公私密钥的文…

计算机竞赛 深度学习交通车辆流量分析 - 目标检测与跟踪 - python opencv

文章目录 0 前言1 课题背景2 实现效果3 DeepSORT车辆跟踪3.1 Deep SORT多目标跟踪算法3.2 算法流程 4 YOLOV5算法4.1 网络架构图4.2 输入端4.3 基准网络4.4 Neck网络4.5 Head输出层 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; *…

【数据结构】顺序串

顺序串 字符串简称串&#xff0c;计算机上非数值处理的对象基本都是字符串数据。我们常见的信息检索系统(如搜索引擎)、文本编辑程序(如Word)、问答系统、自然语言翻译系统等&#xff0c;都是以字符串数据作为处理对象的。本章详细介绍字符串的存储结构及相应的操作。 实现功…

【Vue.js】使用Element搭建首页导航左侧菜单

一&#xff0c;Mock.js 1.1 认识Mock.js Mock.js是一个用于前端开发中生成随机数据、模拟接口响应的 JavaScript 库。模拟数据的生成器&#xff0c;用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率 总结来说&#xff0c;Element中的Mock.js是一个用于…

怎样快速打开github.com

1访问这个网站很慢是因为有DNS污染&#xff0c;被一些别有用心的人搞了鬼了&#xff0c; 2还有一个重要原因是不同的DNS服务器解析的速度不一样。 1 建议设置dns地址为114.114.114.114.我觉得假设一个县城如果有一个DNS服务器的话&#xff0c;这个服务器很可能不会存储…

[论文笔记]P-tuning v2

引言 今天带来第五篇大模型微调论文笔记P-tuning v2: Prompt Tuning Can Be Comparable to Fine-tuning Across Scales and Tasks。 作者首先指出了prompt tuning的一些不足,比如在中等规模的模型上NLU任务表现不好,还不能处理困难的序列标记任务,缺乏统一应用的能力。 然…

【Spring Boot】实战:实现Session共享

🌿欢迎来到@衍生星球的CSDN博文🌿 🍁本文主要学习实现Session共享 🍁 🌱我是衍生星球,一个从事集成开发的打工人🌱 ⭐️喜欢的朋友可以关注一下🫰🫰🫰,下次更新不迷路⭐️💠作为一名热衷于分享知识的程序员,我乐于在CSDN上与广大开发者交流学习。 💠我…

【Clickhouse2022.02 查询优化】

一、现场场景概述 现场每天每张表入库数据量大约2-4亿条,页面涉及到自定义时间段查询(白天08:00-15:00,夜晚23:00-06:00)与不同时间段(最近一天、一周、一个月和全部)的统计指标查询。 二、主要问题 时间跨度大无查询或查询条件命中数据过多的分页查询场景速度慢 (主要是数据…

wepack打包生产环境使用http-proxy-middleware做api代理转发的方法

首先安装http-proxy-middleware依赖&#xff0c;这个用npm和yarn安装都可以。 然后在express服务器的代码增加如下内容&#xff1a; const express require("express"); const app express(); const { createProxyMiddleware, fixRequestBody, } require("h…

线程数过多会造成什么异常?

线程过多可能会导致栈溢出和堆异常&#xff0c;这是因为每个线程都会占用一定的栈空间和堆空间&#xff1a; 栈溢出&#xff08;StackOverflowError&#xff09;&#xff1a; 每个线程都有自己的调用栈&#xff08;stack&#xff09;&#xff0c;栈用来保存方法调用的信息和局部…

代码随想录 Day 48| 198. 打家劫舍 |

198. 打家劫舍 class Solution { public:int rob(vector<int>& nums) {if (nums.size() 0) return 0;if (nums.size() 1) return nums[0];vector<int> f(nums.size()10,0);f[1]nums[0];f[2]max(nums[0],nums[1]);for(int i3;i<nums.size();i){f[i]max(f[…

华为云Stack的学习(八)

九、华为云Stack网络服务介绍 1.网络服务概览 1.1 租户界面的网络服务 租户登入ManageOne运营面后&#xff0c;可在服务列表中查看到网络服务。用户使用网络服务前管理员需要在Service OM上提前创建好外部网络。 1.2 华为云Stack网络服务全景图 1.3 网络服务承载网元 2.虚拟…

Tuxera NTFS 2022 for Mac破解版百度网盘免费下载安装激活教程

Mac打不开移动硬盘”有多种原因&#xff0c;解决办法也不尽相同。它可能是安装的NTFS for Mac读写软件版本和当前macOS系统的兼容问题、或者是Mac没有正常连接硬盘等等。本篇文章就将为您罗列出导致“Mac打不开移动硬盘”的原因和解决办法。 为此不得不使用著名的Tuxera NTFS …

01.自动化交易综述

算法交易的概念&#xff1a; 利用自动化平台&#xff0c;执行预先设置的一系列规则完成交易行为。 算法交易的优势 1.历史数据评估 2.执行高效 3.无主观情绪输入 4.可度量评价 5.交易频率 算法交易的劣势 1.成本&#xff0c;成本低难以体现收益 2.技巧 算法交易流程 大前…

最快的包管理器--pnpm创建vue项目完整步骤

1.用npm全局安装pnpm npm install -g pnpm 2.在要创建vue项目的包下进入cmd&#xff0c;输入&#xff1a; pnpm create vue 3.输入项目名字&#xff0c;选择Router,Pinia,ESLint,Prettier之后点确定 4.cd到创建好的项目 &#xff0c;安装依赖 cd .\刚创建好的项目名称\ p…

云原生Kubernetes:K8S配置资源管理

目录 一、理论 1.Secret 2.Secret创建 3.Secret使用 4.Configmap 5.Configmap创建 6.Configmap使用 二、实验 1.Secret创建 2.Secret使用 3.Configmap创建 4.Configmap使用 三、问题 1.变量引用生成资源报错 2.查看pod日志失败 3.创建configmap报错 4.YAML创建…

网络编程-UDP协议(发送数据和接收数据)

需要了解TCP协议的&#xff0c;可以看往期文章 https://blog.csdn.net/weixin_43860634/article/details/133274701 TCP/IP参考模型 通过此图&#xff0c;可以了解UDP所在哪一层级中 代码案例 发送数据 package com.hidata.devops.paas.udp;import java.io.IOException; …

ElementUI之登陆+注册->饿了吗完成用户登录界面搭建,axios之get请求,axios之post请求,跨域,注册界面

饿了吗完成用户注册登录界面搭建axios之get请求axios之post请求跨域注册界面 1.饿了吗完成用户注册登录界面搭建 将端口号8080改为8081 导入依赖&#xff0c;在项目根目录使用命令npm install element-ui -S&#xff0c;添加Element-UI模块 -g&#xff1a;将依赖下载node_glod…