如何限制Bootstrap分页导航的显示页码数量

核心实现逻辑 #

• 先定义基础参数：每页展示100条，每次页码导航最多显示10个页码
• 从请求参数中获取当前选中页码，默认值为1
• 计算总页数：总数据量除以每页条数，向上取整即可
• 计算当前展示的页码区间：起始页码默认取当前页码，结束页码为当前页码 + 9；如果结束页码超过总页数，就把结束页码设为总页数，若需要始终保持10个页码展示（总页数足够的前提下），可反向修正起始页码，完全匹配「选第N页就显示N到N+9页」的滑动效果
• 修正原代码的分页参数bug：原代码第二页从200开始取数，会漏掉101-199区间的数据，正确的取数区间应该是start = (当前页-1)*100 + 1，end = 当前页*100
• 给当前选中的页码加上active高亮样式，边界状态的首页、尾页加disabled属性，避免无效点击

修改后可直接运行的代码 #

<?php
// 基础配置
$pageSize = 100; // 每页展示条数
$showPageNum = 10; // 导航栏最多显示页码数
$total = $a; // 沿用原代码的总数据量变量$a
$totalPage = ceil($total / $pageSize); // 计算总页数
// 获取当前页码，默认展示第1页
$currentPage = isset($_GET['page']) ? intval($_GET['page']) : 1;
$currentPage = max(1, min($currentPage, $totalPage)); // 页码越界修正
// 计算要显示的页码区间
$startPage = $currentPage;
$endPage = $currentPage + $showPageNum - 1;
if ($endPage > $totalPage) {
    $endPage = $totalPage;
    // 不需要临近尾页时固定显示10个页码的话，直接注释下面这行即可
    $startPage = max(1, $endPage - $showPageNum + 1);
}
?>
<nav aria-label="Page navigation example">
    <ul class="pagination">
        <!-- 首页按钮 -->
        <li class="page-item <?php if($currentPage == 1) echo 'disabled';?>">
            <a class="page-link" href="?page=1&start=1&end=100">Start</a>
        </li>
       
        <?php 
        // 循环输出当前区间的页码
        for($i = $startPage; $i <= $endPage; $i++){
            $start = ($i-1)*$pageSize + 1;
            $end = $i*$pageSize;
            // 最后一页结束值修正为总条数，避免超过数据范围
            if($i == $totalPage) $end = $total;
            $active = $i == $currentPage ? 'active' : '';
        ?>
            <li class="page-item <?php echo $active;?>">
                <a class="page-link" href="?page=<?php echo $i;?>&start=<?php echo $start;?>&end=<?php echo $end;?>"><?php echo $i;?></a>
            </li>
        <?php } ?>
        <!-- 尾页按钮 -->
        <li class="page-item <?php if($currentPage == $totalPage) echo 'disabled';?>">
            <a class="page-link" href="?page=<?php echo $totalPage;?>&start=<?php echo ($totalPage-1)*$pageSize +1;?>&end=<?php echo $total;?>">Last</a>
        </li>
    </ul>
</nav>

效果说明 #

• 第1页时默认显示1-10页页码
• 第2页时自动滑动显示2-11页页码，逐页向后偏移
• 总页数不足10页时自动展示全部页码，不会出现空页码
• 临近最后几页时可根据注释选择是否固定展示10个页码，适配不同交互需求

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