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

这篇具有很好参考价值的文章主要介绍了php实现分页功能跳转和ajax方式实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

实现效果 

php实现分页功能跳转和ajax方式实现,php,乱七八糟,html,php,开发语言,sql,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分页功能文章来源地址https://www.toymoban.com/news/detail-730267.html


一、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>

到了这里,关于php实现分页功能跳转和ajax方式实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序页面跳转和通信

    在开发小程序的时候,会碰到页面间进行跳转的需求,小程序间页面跳转的方法有很多,大体分为两类,一个是指令方式,一个是用过js控制。 wx.navigateTo用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序,通常

    2024年02月10日
    浏览(28)
  • 路由跳转和传参(vue3)

    准备工作:安装了路由,配置了路由表,全局注册了路由 ​ vue3路由官方文档 安装路由 npm yarn 路由跳转 首先在需要跳转的页面引入 API---useRouter 在跳转页面定义router变量 用 router.push跳转页面 (导航到不同的位置) 用router.replace(替换当前位置) 用router.go横跨历史 路由传参 一.标

    2024年02月10日
    浏览(33)
  • 微信小程序路径跳转和传参

    注意: 使用声明式导航(标签)跳转 那个跳转标签默认是一行都可以点击 范围有点大不灵活   建议使用通过点击触发函数改变路径  wx.navigateBack ({}): 返回到之前的路径页面 不能是tabBar页面 返回多少次由delta: 1,控制1就是返回到上一次的路径页面 默认为1可以直接 wx.navigate

    2023年04月27日
    浏览(75)
  • vue3 的router跳转 - 页面同tab跳转和打开新tab跳转

    当前页需要的方法 主要是获得Vue Router实例暴露的一些方法,使用这些方法,进行路由操作 引入 调用 目标页需要的方法 主要是对传递来的参数,进行接收,比如查询参数,页面路径,标题,hash等 调用 route里面的数据会被处理成响应式 页面同tab跳转 push(to) :跳转到指定的路

    2024年02月01日
    浏览(34)
  • 教你实现SSM和Ajax后端分页

    一,SSM中分页的使用 在java中分页一直是我不敢触及的一部分。本次博客全面剖析一下SSM框架如何实现分页。 二,效果展示 点击前一页后一页首页或者尾页或者是跳转都是静态的实现。 三,表单的实现 3.1,前端代码 listByajax.jsp 3.2,Ajax的实现 3.3,配置好page(用于显示条数,

    2024年02月15日
    浏览(35)
  • 【Linux】vim 命令模式下跳转和删除方法

    目录 1. 跳转到文件结尾 2. 跳转到某一行 3. 删除所有内容 4. 删除某一行到某一行中间的所有内容 5. 删除光标所在位置的字符 6. 删除到下一个单词开头 7. 删除到这个单词末尾 8. 删除到这个单词末尾,后面的标点符号也删除 9. 删除到前一个单词 10. 删除一整行 11. 删除

    2024年02月11日
    浏览(34)
  • 页面跳转和两个页面之间的数据传递-鸿蒙ArkTS

    本篇文章主要是对两个页面之间数据传递进行实现。 页面跳转和参数接受是通过导入 router 模块实现。 router.pushUrl() 跳转到指定页面。 router.replaceUrl() 替换当前页面并销毁。 router.back() 返回上一个页面。 router.getParams() 获取上一个页面跳转过来携带的参数。 router.clear() 清空当

    2024年02月12日
    浏览(49)
  • js(javascript)中页面跳转和窗口关闭等操作

    1、self.loaction.href=\\\"/具体路径\\\" 2、location.href=\\\"/具体路径\\\" 3、windows.loaction.href=\\\"/具体路径\\\" 4、this.loaction.href=\\\"/具体路径\\\" parent.location.href=\\\"/具体路径\\\" top.location.href=\\\"/具体页面\\\" window.location.reload() 使用该方法刷新页面时,如果有数据待提交,会提示是否提交 如果页面中自定义了f

    2024年02月16日
    浏览(36)
  • Django和jQuery,实现Ajax表格数据分页展示

    当存在重新请求接口才能返回数据的功能时,若页面的内容很长,每次点击一个功能,页面又回到了顶部,对于用户的体验感不太友好,我们希望当用户点击这类的功能时,能直接加载到数据,请求后端的操作不会呈现在前端,给用户一种无感知的状态。 若希望在不重新加载

    2024年02月08日
    浏览(32)
  • 嵌入式科普(9)vscode无法跳转和恢复默认配置

    一、目的/概述 二、解决办法     2.1 使能Intelli Sense Engine     2.2 vscode恢复默认配置     2.3 c/c++与clangd冲突 嵌入式科普(9)vscode无法跳转和恢复默认配置 1、2024年的第一天突然vscode无法跳转,莫名其妙 2、尝试了各种设置和插件都无效,卸载重装vscode也无效,删除C:Usersjerry.vs

    2024年01月22日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包