PHP implementa la función de paginación jump y la implementación de ajax

lograr efecto 

Preparación 

Crear tablas de datos e importar datos de prueba.

CREAR TABLA `usuarios` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `username` varchar(30) COMENTARIO NULO POR DEFECTO '账号',
  `email` varchar(30) COMENTARIO NULO POR DEFECTO '密码', CLAVE
  PRIMARIA (` id`)
) MOTOR=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

INSERTAR EN VALORES `usuarios` ('1', 'admin', '[email protected]');

INSERTAR EN VALORES `usuarios` ('2', 'xiaoming', '[email protected]');

INSERTAR EN VALORES `usuarios` ('3', 'xiaoming1', '[email protected]');

INSERTAR EN VALORES `usuarios` ('4', 'xiaoming2', '[email protected]');

INSERTAR EN VALORES `usuarios` ('5', 'xiaoming3', '[email protected]');

INSERTAR EN VALORES `usuarios` ('6', 'xiaoming4', '[email protected]');

INSERTAR EN VALORES `usuarios` ('7', 'xiaoming5', '[email protected]');

INSERTAR EN VALORES `usuarios` ('8', 'xiaoming6', '[email protected]');

INSERTAR EN VALORES `usuarios` ('9', 'xiaoming7', '[email protected]');

 

Tabla de contenido

1. PHP implementa la función de paginación 1 (método de salto) 

2. Utilice ajax para implementar la función de paginación de PHP


1. PHP implementa la función de paginación 1 (método de salto) 
<?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>
2. Utilice ajax para implementar la función de paginación de 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>

Supongo que te gusta

Origin blog.csdn.net/weixin_39934453/article/details/133272589
Recomendado
Clasificación