如何添加分页到过滤产品页面(使用jQuery和PHP)

要在使用jQuery和PHP的过滤产品页面上添加分页功能，你需要完成以下几个步骤：

基础概念

分页是一种将大量数据分割成多个小部分的技术，以便用户可以更容易地浏览和查找所需信息。在前端，分页通常通过显示页码或上一页/下一页按钮来实现；在后端，分页涉及限制每次查询返回的数据量。

类型

客户端分页：所有数据一次性加载到客户端，然后在前端进行分页。
服务器端分页：每次只加载当前页所需的数据，适用于数据量较大的情况。

应用场景

电商网站的产品列表
新闻网站的文章列表
论坛的帖子列表

实现步骤

后端（PHP）

接收分页参数：通常是通过URL参数传递当前页码和每页显示的数量。
查询数据库：使用SQL的LIMIT和OFFSET子句来获取指定范围的数据。

<?php
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$limit = 10; // 每页显示的数量
$offset = ($page - 1) * $limit;

// 假设有一个数据库连接 $conn
$sql = "SELECT * FROM products WHERE category = ? LIMIT $limit OFFSET $offset";
$stmt = $conn->prepare($sql);
$stmt->bind_param("s", $_GET['category']);
$stmt->execute();
$result = $stmt->get_result();
$products = $result->fetch_all(MYSQLI_ASSOC);
echo json_encode($products);
?>

前端（jQuery）

发送AJAX请求：使用jQuery的$.ajax方法获取分页数据。
显示数据：将获取的数据动态插入到页面中。
生成分页控件：根据总页数生成页码按钮，并绑定点击事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Product Filter with Pagination</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="products"></div>
    <div id="pagination"></div>

    <script>
        let currentPage = 1;
        const limit = 10;

        function loadProducts(page) {
            $.ajax({
                url: 'get_products.php',
                data: { page: page, category: 'electronics' },
                success: function(data) {
                    $('#products').html('');
                    data.forEach(product => {
                        $('#products').append(`<div>${product.name} - $${product.price}</div>`);
                    });
                    renderPagination(data.totalPages);
                }
            });
        }

        function renderPagination(totalPages) {
            let paginationHtml = '';
            for (let i = 1; i <= totalPages; i++) {
                paginationHtml += `<button onclick="loadProducts(${i})">${i}</button>`;
            }
            $('#pagination').html(paginationHtml);
        }

        $(document).ready(function() {
            loadProducts(currentPage);
        });
    </script>
</body>
</html>