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

news2024/10/7 16:20:16

实现效果 

准备工作 

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

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.coloradmin.cn/o/1040899.html

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

相关文章

Docker 容器编排

是什么 Docker-Compose是 Docker 官方的开源项目&#xff0c;负责实现对Docker容器集群的快速编排。 Compose 是 Docker 公司推出的一个工具软件&#xff0c;可以管理多个 Docker 容器组成一个应用。你需要定义一个 YAML 格式的配置文件docker-compose.yml&#xff0c;写好多个…

基于微信小程序的医院门诊体检预约管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言系统主要功能&#xff1a;具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计…

Xcode15下载iOS17一直中断解决办法

1、问题描述 目前的 xcode 15 安装时&#xff0c;跟以前有个差别&#xff1a;以往的 xcode 安装时自带了 ide、sdk 等工具包&#xff0c;安装后即可开始开发&#xff0c;而最新的包则被分开成了不同的包&#xff0c;这里以 ios 开发包为例&#xff1a;Xcode_15.xip 和 iOS_17_…

网络编程-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; …

图形处理软件Photoshop Elements 2020 mac中文版 ps简化版

Photoshop Elements 2020 mac是一款非常实用的图形处理工具。ps elements 2020 mac中文版可以帮助您自动生成照片和视频作品的功能&#xff0c;采用Adobe Sensei AI技术可进行图像组织、编辑和创建等。Photoshop Elements 2020 for Mac激活版可以帮助您轻松整理照片和视频&…

【springboot3.x 记录】关于Jakarta包无法引入的问题

最近想将一些项目升级到springboot3.x和java17的时候&#xff0c;发现项目依赖中有Jakarta的包&#xff0c;但是代码标红提示没有相关的类&#xff0c;特此记录一下排查问题和最终解决问题的思路方法 一、发现问题 因为之前有创建过 springboot3.x java17 的项目&#xff0c;…

php导出cvs,excel打开数字超过16变科学计数法

今天使用php导出cvs&#xff0c;在excel中打开&#xff0c;某一个字段是数字&#xff0c;长度高于16位结果就显示科学计数法 超过15位的话从第16位开始就用0代替了 查询了半天总算解决了就是在后面加上"\t" $data[$key][1] " ".$value[1]."\t";…

法规标准-UN R48标准解读

UN R48是做什么的&#xff1f; UN R48全名为关于安装照明和灯光标志装置的车辆认证的统一规定&#xff0c;主要描述了对各类灯具的布置要求及性能要求&#xff1b;其中涉及自动驾驶功能的仅有6.25章节【后方碰撞预警信号】&#xff0c;因此本文仅对此章节进行解读 功能要求 …

Mysql编译安装和yum安装

一、msql数据库介绍 1、什么是sql sql代表结构化查询语言&#xff0c;sql是用于访问数据库的标椎化语言 sql包含三个部分 DDL数据定义语言包含定义数据库及其对象的语言&#xff0c;例如表&#xff0c;视图&#xff0c;触发器&#xff0c;存储过程等 DML数据操作语言包含允许数…

windows 修改hosts映射,可以ping通,但是无法通过http url 路径访问,出现 500 Internal Privoxy Error

问题描述 今天在学习nginx时&#xff0c;想在hosts配置一个nginx的域名映射&#xff0c;但是发现访问nginx服务的ip时可以访问通&#xff0c;在dos命令窗口ping配置的域名映射也可以ping通&#xff0c;但是一旦在浏览器通过http请求访问配置的hosts域名映射时却出现 500 Inter…

学习:原码-反码-补码

文章目录 前提知识原码详解反码补码 二进制负数的运算 前提知识 正数不需要进行原码反码补码一说&#xff0c;正数就是正数&#xff0c;我们原码反码补码是为了针对负数 &#xff08;按道理来说其实根本不存在什么码&#xff0c;只有二进制机器码&#xff0c;不过是为了方便计…

【Java 基础篇】Java 实现模拟斗地主游戏

欢迎阅读本篇博客&#xff0c;在这篇博客中&#xff0c;我们将详细讲解如何使用Java编写一个简单的模拟斗地主游戏。这个项目将帮助您了解Java编程中的一些基本概念&#xff0c;如面向对象编程、集合框架的使用、随机数生成等。 引言 斗地主是一种非常受欢迎的纸牌游戏&#…

单日 5000 亿行 / 900G 数据接入,TDengine 3.0 在中国地震台网中心的大型应用

小T导读&#xff1a;为满足地震预警数据存储、检索和处理的建设与集成需求&#xff0c;以及响应国家国产软件自主可控的号召&#xff0c;中国地震台网中心决定选用国产数据库 TDengine 来存储和处理地震波形数据。本文将针对 TDengine 3.0 在地震领域的应用展开详细讲解。 关于…

计算机竞赛 深度学习交通车辆流量分析 - 目标检测与跟踪 - 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; *…

[Linux入门]---进程状态

文章目录 1.进程主要状态进程运行状态进程阻塞状态进程的挂起状态 2.Linux进程状态Linux进程内核源代码①R运行状态②S睡眠状态③D磁盘休眠状态T停止状态④X死亡状态⑤Z僵尸状态⑥孤儿进程 3.总结 1.进程主要状态 进程运行状态 ①内存中有一个运行队列&#xff0c;其中有两个指…

ElementUI实现登录注册啊,axios全局配置,CORS跨域

一&#xff0c;项目搭建 认识ElementUI ElementUI是一个基于Vue.js 2.0的桌面端组件库&#xff0c;它提供了一套丰富的UI组件&#xff0c;包括表格、表单、弹框、按钮、菜单等常用组件&#xff0c;具备易用、美观、高效、灵活等优势&#xff0c;能够极大的提高Web应用的开发效…

今天聊一聊高性能系统架构设计是什么样的

Java全能学习面试指南&#xff1a;https://javaxiaobear.cn 今天聊一聊大家常听到的高性能系统架构。 高性能系统架构&#xff0c;主要包括两部分内容&#xff0c;性能测试与性能优化。性能优化又可以细分为硬件优化、中间件优化、架构优化及代码优化&#xff0c;知识架构图如…

arcgis搭建离线地图服务WMTS

Arcgis搭建离线地图服务WMTS 发布时间&#xff1a;2021-03-04 版权&#xff1a; ARCGIS搭建离线地图服务器&#xff0c;进行离线地图二次开发 2. 离线地图服务发布&#xff08;WMTS服务&#xff09; &#xff08;详细教程&#xff1a;卫星地图_高清卫星地图_地图编辑_离线地…

Python爬虫实战:根据关键字爬取某度图片批量下载到本地

本文主要介绍如何使用Python爬虫根据关键字爬取某度图片批量下载到本地&#xff0c;并且加入代理IP的使用&#xff0c;绕过反爬措施&#xff0c;提高程序的可用性和稳定性。文章包含了代码实现和详细解释&#xff0c;适合于初学者学习。 目录 前言 准备工作 Requests库 Bea…

微信小程序,动态设置三级联动, 省市区街道

1.第一步 传parentId0 查询省份 2.第二步 选择省份,传pathId选择省份的pathId, 不传parentId,会查询出 市/县数据 3.第三步 根据选择县的parentId 查询街道数据,传parentId选择的县id 4.选择结果回显 显示所选择的 path 以/分割 取最后一级<van-dropdown-menu…