如何修改PHP+AJAX分页代码限制显示的页码数量

你现有代码的核心问题是PHP逻辑直接遍历输出了全部页码，没有根据当前页码裁剪展示范围，同时jQuery的事件绑定方式不兼容AJAX动态加载的分页元素，修改方案如下：

第一步：修改PHP分页代码 #

调整后可实现仅展示当前页附近的指定数量页码，超出部分用省略号替代：

<?php
if (!empty($total_pages)) {
    // 获取当前页码，默认第1页
    $current_page = isset($_GET['page']) ? intval($_GET['page']) : 1;
    // 配置当前页左右各展示2个邻近页码，可自行调整数值
    $adjacent_count = 2;
    // 计算要展示的页码起止范围，处理边界异常
    $start = max(1, $current_page - $adjacent_count);
    $end = min($total_pages, $current_page + $adjacent_count);

    // 前置省略号逻辑：起始页码大于1时输出首页+省略号
    if ($start > 1) {
        ?>
        <li class="page-item" id="1">
            <a href="JavaScript:Void(0);" data-cat-id="3" data-id="1" class="page-link">1</a>
        </li>
        <?php if ($start > 2) { ?>
            <li class="page-item disabled"><span class="page-link">...</span></li>
        <?php }
    }

    // 循环输出指定范围内的页码
    for ($i = $start; $i <= $end; $i++) {
        $active = $i == $current_page ? 'active' : '';
        ?>
        <li class="page-item <?php echo $active; ?>" id="<?php echo $i; ?>">
            <a href="JavaScript:Void(0);" data-cat-id="3" data-id="<?php echo $i; ?>" class="page-link"><?php echo $i; ?></a>
        </li>
        <?php
    }

    // 后置省略号逻辑：结束页码小于总页数时输出省略号+尾页
    if ($end < $total_pages) {
        <?php if ($end < $total_pages - 1) { ?>
            <li class="page-item disabled"><span class="page-link">...</span></li>
        <?php } ?>
        <li class="page-item" id="<?php echo $total_pages; ?>">
            <a href="JavaScript:Void(0);" data-cat-id="3" data-id="<?php echo $total_pages; ?>" class="page-link"><?php echo $total_pages; ?></a>
        </li>
        <?php
    }
}
?>

第二步：修改jQuery代码 #

改用事件委托绑定点击事件，解决AJAX动态加载的分页元素无法触发点击的问题：

<script>
$(document).ready(function() {
    $("#target-content").load("include/pagination.php?page=1&catpage=3");
    // 绑定到document上，兼容所有动态插入的.page-link元素
    $(document).on('click', '.page-link', function(){
        var id = $(this).attr("data-id");
        var catid = $(this).attr("data-cat-id");
        
        var select_id = $(this).parent().attr("id");
        $.ajax({
            url: "include/pagination.php",
            type: "GET",
            data: {
                page : id,
                catpage : catid,
            },
            cache: false,
            success: function(dataResult){
                $("#target-content").html(dataResult);
                $('html, body').animate({
                    scrollTop: $("#target-content").offset().top
                }, 2000);
                $(".page-item").removeClass("active");
                $("#"+select_id).addClass("active");
            }
        });
    });
});
</script>

内容的提问来源于stack exchange，提问作者HarsimranSingh