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,一经查实,立即删除!

相关文章

【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; *…

【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上与广大开发者交流学习。 💠我…

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…

华为云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 …

最快的包管理器--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…

配置OSPFv3引入外部路由及路由过滤 华为实验

1.1 实验介绍 1.1.1 关于本实验 在大型园区网络中&#xff0c;往往使用不同的路由协议进行组网&#xff0c;实现全网的网络互通。不同的协议间通信&#xff0c;除了路由协议本身&#xff0c;还需要引入外部路由及路由信息过滤等技术。 本章内容主要介绍OSPFv3路由过滤及引入外…

win使用git(保姆级教程)

序言 上学期间用的git并不多&#xff0c;但是从研三实习以及后面工作来看&#xff0c;git是一项必备技能&#xff0c;所以在此来学习一下。 下载git安装包 打开网站&#xff0c;根据需求来下载&#xff1b;一般按照如下方式进行下载&#xff1a; 然后安装的时候记得按下图勾…

论文笔记:ViTGAN: Training GANs with Vision Transformers

2021 1 intro 论文研究的问题是&#xff1a;ViT是否可以在不使用卷积或池化的情况下完成图像生成任务 即不用CNN&#xff0c;而使用ViT来完成图像生成任务将ViT架构集成到GAN中&#xff0c;发现现有的GAN正则化方法与self-attention机制的交互很差&#xff0c;导致训练过程中…

《优化接口设计的思路》系列:第四篇—接口的权限控制

系列文章导航 《优化接口设计的思路》系列&#xff1a;第一篇—接口参数的一些弯弯绕绕 《优化接口设计的思路》系列&#xff1a;第二篇—接口用户上下文的设计与实现 《优化接口设计的思路》系列&#xff1a;第三篇—留下用户调用接口的痕迹 《优化接口设计的思路》系列&#…

知识库搭建保姆级教程,如何从0到1完成知识库搭建

在这个信息爆炸的时代&#xff0c;如何获取、整理和应用知识成为了我们个体价值和企业核心竞争力打造的重要表现&#xff0c;搭建一个高效的知识库可以提升我们企业的竞争力&#xff0c;必要时还能快速切换赛道&#xff0c;开展一个新的领域。 今天我们将结合HelpLook 来与你一…

C++之互斥锁、读写锁、互斥量、 信号量、原子锁机制总结(二百二十五)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

MAC word 如何并列排列两张图片

系统&#xff1a;MAC os 参考博客 https://baijiahao.baidu.com/s?id1700824516945958911&wfrspider&forpc 步骤1 新建一个word文档和表格 修改表格属性 去掉自动重调尺寸以适应内容 插入图片 在表格的位置插入对应的图片如下 去除边框 最终结果如下