分页组件active类异常：页码>4时无法正确添加active类

我的网站分页组件存在异常，点击页码大于4的页面时，页面可正常跳转，但对应的页码无法正确添加active类。我怀疑问题与$startPage和$endPage的计算逻辑有关，但无法确定。

现有代码 #

<div class="wrapper">
   <nav>
      <ul class="pager">
         <?php
         $totalPages = ceil($totalRows / $limit);
         $maxVisiblePages = 7; // Set the maximum number of page links to display (should be odd)
         $halfMaxVisiblePages = floor($maxVisiblePages / 2);
                
         // Calculate the starting and ending page numbers for limited pagination
         $startPage = max(1, $page - $halfMaxVisiblePages);
         $endPage = min($totalPages, $page + $halfMaxVisiblePages);
                
         // Adjust the starting page number if the ending page exceeds the total pages
         if ($endPage - $startPage + 1 < $maxVisiblePages) {
            $startPage = max(1, $endPage - $maxVisiblePages + 1);
         }

         if ($page > 1) {
            echo '<li class="pager__item pager__item--prev">
               <a class="pager__link" href="?page=' . ($page - 1) . '">
                  <svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewbox="0 0 8 12">
                     <g fill="none" fill-rule="evenodd">
                        <path fill="#33313C" d="M7.41 1.41L6 0 0 6l6 6 1.41-1.41L2.83 6z"></path>
                     </g>
                  </svg>
               </a>
            </li>';
         } else {
            echo '<li class="pager__item pager__item--prev">
               <a class="pager__link dis" href="?page=' . ($page - 1) . '">
                  <svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewbox="0 0 8 12">
                     <g fill="none" fill-rule="evenodd">
                        <path fill="#c4c4c4" d="M7.41 1.41L6 0 0 6l6 6 1.41-1.41L2.83 6z"></path>
                     </g>
                  </svg>
               </a>
            </li>';
         }

         // Loop through all the page numbers
         for ($i = $startPage; $i <= $endPage; $i++) {
            $isActive = ($i === $page) ? 'active' : '';
            echo '<li class="pager__item"><a class="pager__link ' . $isActive . '" href="?page=' . $i . '">' . $i . '</a></li>';
         }

         if ($page < $totalPages) {
            echo '<li class="pager__item pager__item--next">
               <a class="pager__link" href="?page=' . ($page + 1) . '">
                  <svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewbox="0 0 8 12">
                     <g fill="none" fill-rule="evenodd">
                        <path fill="#33313C" d="M7.41 1.41L6 0 0 6l6 6 1.41-1.41L2.83 6z"></path>
                     </g>
                  </svg>
               </a>
              </li>';
         } else {
         echo '<li class="pager__item pager__item--next">
            <a class="pager__link dis" href="?page=' . ($page + 1) . '">
               <svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewbox="0 0 8 12">
                  <g fill="none" fill-rule="evenodd">
                     <path fill="#c4c4c4" d="M7.41 1.41L6 0 0 6l6 6 1.41-1.41L2.83 6z"></path>
                  </g>
               </svg>
            </a>
           </li>';
         }
         ?>
      </ul> 
   </nav>
</div>

问题定位与修复 #

1. 核心问题：页码范围计算逻辑缺失双向调整 #

当前代码只调整了startPage，没有同步调整endPage，导致当页码超过4后，当前页可能不在startPage到endPage的显示范围内，循环遍历自然不会给当前页加上active类。

2. 修复后的页码计算逻辑 #

替换原有的页码计算代码为：

$totalPages = ceil($totalRows / $limit);
$maxVisiblePages = 7; // 最多显示的页码数（建议为奇数）
$halfMaxVisiblePages = floor($maxVisiblePages / 2);

// 初始计算起始和结束页码，确保当前页在中间位置
$startPage = max(1, $page - $halfMaxVisiblePages);
$endPage = min($totalPages, $page + $halfMaxVisiblePages);

// 如果显示的页码数不足maxVisiblePages，先从右侧补全
if ($endPage - $startPage + 1 < $maxVisiblePages) {
    $startPage = max(1, $endPage - $maxVisiblePages + 1);
}
// 补全后再检查左侧空间，从左侧补全（避免总页数较多时显示不全）
if ($endPage - $startPage + 1 < $maxVisiblePages) {
    $endPage = min($totalPages, $startPage + $maxVisiblePages - 1);
}

3. 额外修复：确保$page为整数类型 #

URL传参的page是字符串类型，直接用===比较会失败，在代码最开头添加类型转换：

// 处理当前页码，确保为整数且在合法范围内
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$page = max(1, min($page, $totalPages));

修改后，点击大于4的页码时，当前页会始终处于显示的页码列表中，active类也能正确添加。

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